伪元素本身不触发交互，仅作为父元素状态的视觉表现层，需配合:hover、:checked等伪类使用，content必须设值才能渲染，且无法被js选中或监听事件。
伪元素本身不触发交互，但能配合 :hover、:active 和 :checked 等伪类实现动态指示 —— 关键是别把它当“开关”，而是当“状态画布”。
用 ::before / ::after 做悬停图标或加载态
很多开发者误以为伪元素能独立响应点击，其实它只是样式层的“贴纸”。真正驱动变化的是父元素的状态。比如给按钮加一个右向箭头，鼠标悬停时才显示：
.btn::after {
content: "→";
opacity: 0;
transition: opacity 0.2s;
}
.btn:hover::after {
opacity: 1;
}
-
content必须设值，否则伪元素不渲染（空字符串""也行） - 别在
::before里放大段文字或复杂 SVG —— 它无法语义化，屏幕阅读器通常忽略 - 移动端 Safari 对
::after在:hover下的触发不稳定，建议同时写:focus和:active覆盖
:checked + ::after 实现开关类按钮的视觉切换
纯 CSS 开关按钮依赖 input[type="checkbox"] 的 :checked 状态，伪元素负责“滑块”动画：
.toggle input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.toggle::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: white;
border-radius: 50%;
transition: transform 0.2s ease;
}
.toggle:checked::after {
transform: translateX(20px);
}
- 伪元素必须依附于可状态化的元素（如
label或带:checked的input），不能直接绑定到div上 - 移动设备上，
transform比改left性能更好，避免触发布局重排 - 如果用
width或height动画伪元素，记得设display: block，否则可能不生效
响应式中伪元素尺寸与定位容易失效的点
伪元素在不同断点下常因父容器尺寸缩放而错位或裁剪，尤其当用 em 或百分比定位时：
- 用
rem替代em控制伪元素大小，避免嵌套字体缩放干扰 - 绝对定位伪元素时，父容器必须有
position: relative，否则会相对视口定位 - 媒体查询里重写伪元素样式时，不要只改
content—— 如果之前设了display: none，得显式写回block或inline-block - 某些安卓 WebView 对
background-image在伪元素中缩放支持差，优先用background-color+border-radius模拟图标
伪元素不是万能指示器，它的价值在于轻量、无 JS、易维护；但它无法替代真实状态管理 —— 比如按钮是否已提交、是否禁用，这些仍需靠 class 切换或属性控制。最容易被忽略的是：所有伪元素生成的内容都不进 DOM 树，也不能被 JavaScript 直接选中或监听事件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
