:focus 无法直接作用于 ::before 或 ::after，因伪元素不可聚焦且 css 规范禁止伪类嵌套伪元素；须通过宿主元素 :focus 配合兄弟选择器（如 +）或 :focus-within 驱动伪元素变化。
不能直接用 :focus 选择器控制 :before 或 :after 的生成或动画——伪元素本身不可聚焦，:focus 只作用于输入框元素自身，但你可以通过父容器或兄弟选择器间接驱动伪元素变化。
为什么 :focus::before 写法无效
CSS 规范明确禁止对伪元素使用伪类（如 :focus、:hover），所以 input:focus::before 是非法语法，浏览器会直接忽略整条规则。常见错误现象是：写了样式却完全没反应，检查控制台也看不到报错，容易误以为是选择器优先级或路径问题。
- 伪元素
::before和::after是依附于宿主元素的“装饰层”，它没有自己的焦点状态 -
:focus只能匹配可聚焦的 HTML 元素（如input、textarea、带tabindex的元素） - 想让伪元素“响应聚焦”，必须把动画逻辑写在宿主元素的
:focus规则里，再通过属性继承或定位触发
用 input:focus + label::before 实现联动光效
典型场景：搜索框右侧配一个图标按钮，聚焦时让图标“呼吸”或变色。关键在于把伪元素挂载在 label 或 span 这类兄弟元素上，再用相邻兄弟选择器 + 绑定。
- HTML 结构需保证
input和目标元素为同级且顺序正确：<input><label class="icon"></label> - 聚焦时修改
label::before的opacity或transform，这两个属性支持 GPU 加速，不触发布局重排 - 避免用
width/height动画，否则可能引起重排抖动
input:focus + .icon::before {
opacity: 1;
transform: scale(1.1);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.icon::before {
content: "?";
opacity: 0.6;
transform: scale(1);
}
用 :focus-within 驱动容器内伪元素
如果输入框被包裹在 div.form-control 里，而你想让整个容器底部的下划线（用 ::after 绘制）在聚焦时上抬并变色，就该用 :focus-within —— 它能监听子元素聚焦，并让父容器上的伪元素响应。
-
:focus-within兼容性需注意：IE 不支持，Safari ≤15.3 行为不稳定，必要时加 JS fallback - 默认状态下给容器设
position: relative，伪元素用absolute定位到底部，聚焦时改bottom和background - 别在
::after里写transition: all，只声明具体属性（如transition: bottom 0.25s, background-color 0.25s），避免意外性能开销
.form-control {
position: relative;
}
.form-control::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #ccc;
}
.form-control:focus-within::after {
bottom: 2px;
background: #007bff;
}
移动端 iOS Safari 的 focus 伪元素陷阱
iOS Safari 对 :focus 触发非常保守：默认只有 input[type="text"]、textarea 等原生可编辑控件能触发，且必须用户真实点击（不是 JS focus() 调用）。这意味着你写的 input:focus + .icon::before 在 iOS 上可能压根不执行。
- 解决方案一：给
input显式加tabindex="0"，强制它可聚焦 - 解决方案二：用
@media (pointer: coarse)检测触屏设备，降级为:active或添加 JS 监听focusin事件来补样式类 - 切记不要依赖
outline: none后无替代方案——iOS 键盘用户仍需视觉焦点指示，可用box-shadow替代
真正难的不是写出动画，而是判断什么时候该用 :focus-within、什么时候得退到 JS；不是堆叠 transition 属性，而是提前预留 border 空间、锁定 transform 基准点、为 prefers-reduced-motion 准备兜底。这些细节不报错，但一上线就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
