transition必须写在::before的初始样式中，否则无效；需显式声明content、合适display及尺寸，属性名须严格匹配，旧浏览器需用:before并避免动态content等高危写法。
transition 必须写在 ::before 的常态规则里
很多人把 transition 写在 :hover::before 或其他交互状态中，这是无效的。浏览器只会在「属性开始变化前」读取 transition 声明，它必须出现在伪元素的初始样式块中，否则压根不注册过渡行为。
-
✅ 正确写法：
.btn::before { content: ""; opacity: 0.5; transition: opacity 0.3s ease; }+.btn:hover::before { opacity: 1; } -
❌ 错误写法：
.btn:hover::before { opacity: 1; transition: opacity 0.3s ease; }—— 过渡不会触发 - transition 不继承，也不跨选择器生效；父元素上写的
transition对::before完全无影响
伪元素没 content 或 display 就根本“动不了”
transition 只对已渲染、有盒模型的元素起作用。::before 默认不生成节点，更谈不上过渡。常见静默失效场景是：content 缺失、display 为 inline、或尺寸为 0。
- 必须显式声明
content: ""（不能省略，也不能写成content: none或空着） -
display至少设为inline-block或block；display: inline下width/height/opacity等多数可动画属性实际不参与渲染流程 - 如果动画依赖
background-image或transform，还得确保伪元素有明确尺寸（width/height）或内容撑开空间，否则渐变/旋转无处呈现
属性名大小写和写法必须完全一致
CSS 属性名区分大小写且严格匹配，哪怕一个连字符错位或缩写混用，都会导致 transition 被忽略。
-
transition: background-color 0.3s;✅ 有效 -
transition: backgroundcolor 0.3s;❌ 无效（漏了连字符） -
transition: background 0.3s;❌ 危险：使用简写会重置整个背景，可能中断background-image渐变过渡 - 涉及
transform时，初始态必须定义完整值，比如transform: translateX(0);，不能只写transform: none;（部分旧引擎不识别none为有效起始值）
旧安卓 WebView 和 IE11 的兼容陷阱
Android 4.x 系统 WebView 和 IE11 对伪元素 transition 支持极弱，不是“不支持动画”，而是底层渲染链路缺失关键环节——比如不解析 ::before 中的 transition 声明，或忽略 content: "" 后的后续样式。
- 降级写法：用单冒号
:before替代::before（IE11 和老安卓只认前者） - 避免
attr()动态 content，老引擎常因属性缺失直接跳过整条规则 - 禁用
-webkit-text-stroke、text-rendering: optimizeLegibility等易触发渲染异常的属性 - 调试时务必在真机 DevTools 中检查 computed 样式，确认
transition是否真的被解析并生效，而不是仅靠桌面浏览器表现判断
::before 在 Elements 面板里稳稳出现，再谈动不动得了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
