before 和 after 是伪元素，只能通过 css 定义且必须配合 content 属性才可见；它们不参与 dom 树、无事件响应能力、需定位才能精确定位，适用于装饰性内容而非交互功能。
before 和 after 本质是伪元素，不是真实 DOM 节点
直接在 HTML 里写 ::before 或 ::after 是无效的——它们只能通过 CSS 定义，且必须配合 content 属性才可见。没有 content，哪怕写了样式也不会渲染。
常见错误现象：div::before { background: red; width: 20px; } 完全不显示，就是因为缺了 content: ""（空字符串也行，但不能省略）。
使用场景：添加装饰性图标、引号、分隔线、小三角等；避免污染 HTML 结构。
-
content必须存在，可为""、"text"、attr(data-label)、url(./icon.svg) - 伪元素默认是
display: inline，想设宽高需加display: block或inline-block - 它们会继承父元素的字体、颜色等部分样式，但不继承
margin、padding等盒模型属性
定位 before/after 到指定位置需要配合 position
伪元素默认插在内容最前/最后，但“视觉位置”常需调整。比如下拉菜单的小箭头、输入框右侧的搜索图标，都得脱离文档流精确定位。
典型做法：给宿主元素设 position: relative，再给伪元素设 position: absolute + top/right 等偏移。
示例：在按钮右侧加一个向右箭头
button {
position: relative;
padding-right: 32px;
}
button::after {
content: "→";
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
}
- 不设
position: relative在父元素上，absolute会相对于最近的定位祖先，容易错位 -
transform: translateY(-50%)比top: -Xpx更可靠，避免因字体大小变化导致垂直偏移不准 - 记得留出足够
padding或用margin避免文字被遮挡
before/after 的层级和交互限制
伪元素默认渲染在宿主元素的「内容层」之上，但仍在宿主元素的背景和边框之下（除非用 z-index 显式提升）。更关键的是：它们无法响应 click、hover 等事件，也不能被 JavaScript 选中（querySelector("::before") 会报错）。
常见误用：试图用 ::after 做可点击的关闭按钮，或监听其 mouseenter —— 这些都做不到。
- 如果需要交互，必须用真实 HTML 元素（如
<span class="icon"></span>）代替 -
z-index只对position不为static的元素生效，所以伪元素要提层必须先设position: absolute或relative - 动画支持有限：能动
opacity、transform、color，但不能动height、width（除非配合display切换，但有闪烁风险）
兼容性和 content 的特殊取值
::before 和 ::after 在 IE8+ 都支持，但双冒号语法（::）IE8 只认单冒号（:），实际项目中仍建议统一用双冒号，现代框架基本不考虑 IE8。
content 支持的值比想象中多，但有些容易踩坑：
-
content: attr(data-title)—— 读取元素的data-title属性值，注意属性名必须完全匹配，且只支持字符串 -
content: counter(section)—— 配合counter-reset/counter-increment实现自动编号，适合目录、标题序号 -
content: "第" counters(section, ".") "节"—— 多级嵌套计数，counters()第二个参数是连接符 - 不要用
content: " "（带空格）来占位，可能引发空白折叠问题；用content: ""+display: inline-block+ 尺寸更可控
伪元素不是万能胶，该用真实节点的时候别硬扛。尤其当内容要 SEO、要可访问性（aria-label）、要 JS 控制时，优先选 HTML 元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
