伪元素::before和::after不能直接绑定:hover，需通过父元素:hover控制其样式；必须设置content和display才能显示，支持定位、过渡、z-index等css增强技巧。
伪元素（::before 和 ::after）本身不能直接绑定 :hover，因为它们不是真实 DOM 节点，无法独立触发交互状态。但你可以通过「父元素 hover 时控制子伪元素样式」来实现视觉上的“伪元素 hover 效果”。
✅ 正确写法：在父元素上写 :hover，再选中其伪元素
关键在于把 :hover 写在**包含伪元素的真实元素**上，然后用选择器链定位到它的 ::before 或 ::after。
- 错误写法（无效）：
div::before:hover { ... }—— 伪元素不支持 hover - 正确写法：
div:hover::before { ... }—— 父元素 hover 时修改伪元素样式
? 必须确保伪元素可显示：content + display（必要条件）
::before 和 ::after 默认不渲染，必须满足两个基本条件：
-
设置
content：哪怕只是空字符串content: ""，否则伪元素不会生成 -
合理设置
display：默认是inline，若需宽高、定位、背景等，常设为block、inline-block或flex
例如：
立即学习“前端免费学习笔记（深入）”；
div { position: relative; }div::after {
content: ""; display: block;
width: 20px; height: 20px;
background: #007bff;
opacity: 0;
transition: opacity .3s;
}
div:hover::after { opacity: 1; }
? 常见增强技巧
-
定位配合：结合
position: absolute和top/right/bottom/left把伪元素放在任意位置 -
过渡动画：对
transform、opacity、background-color等可动画属性加transition -
层级控制：用
z-index确保伪元素显示在合适层（注意父元素需有定位才能生效） -
图标/装饰场景：用
content: "→"或 Unicode 图标（如content: "\2794"）+ 字体设置实现纯 CSS 箭头、下划线、边框等效果
⚠️ 注意兼容性与限制
- IE8+ 支持
:before/:after，但只认单冒号（:before），现代项目建议统一用双冒号（::before） - 不能用 JavaScript 直接操作伪元素样式（无 DOM 节点），所有样式必须靠 CSS 类或状态切换驱动
- 伪元素无法响应点击事件（
pointer-events: none是默认行为），如需交互，请用真实元素替代
