伪元素::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 箭头、下划线、边框等效果