要正确使用 css 的 ::before 和 ::after 伪元素，首先必须设置 content 属性；1. 插入内容时可使用文本、unicode 字符或图片；2. 默认为 inline 元素，需根据布局需求调整 display 类型；3. 常用于添加装饰性内容如图标、分隔符等；4. 可辅助清除浮动或创建视觉效果如高亮层和阴影；5. 注意伪元素不可交互、content 不可省略且需处理好层级关系。
CSS 的 ::before 和 ::after 伪元素，是前端开发中非常实用的小工具。它们可以在不修改 HTML 结构的前提下，为元素添加额外的内容或样式，常用于装饰、图标插入、内容补充等场景。
如何正确使用 before 和 after？
这两个伪元素的基本用法都离不开 content 属性，它决定了你要插入什么内容。最简单的例子：
.element::before {
content: "★";
}这段代码会在 .element 元素内容前面插入一个星号。需要注意几点：
立即学习“前端免费学习笔记（深入）”；
- 必须写
content，否则伪元素不会显示； - 插入的内容是纯文本，也可以是 Unicode 字符或图片（通过
url()）； - 伪元素默认是 inline 元素，如果需要布局控制，建议设置为
display: block或inline-block。
常见用途：添加装饰性内容
伪元素最常见的用途之一就是添加小图标、分隔符或者装饰边框。例如，在导航栏每个链接前加一个小点：
.nav-link::before {
content: "•";
margin-right: 5px;
color: #999;
}这种方式比在 HTML 中一个个写上更简洁，也更容易统一风格。类似地，你还可以用来做“引号”、“箭头”、“下划线动画”等效果。
样式增强：清除浮动和视觉修饰
在早期的 CSS 布局中，::after 常被用来清除浮动（虽然现在 Flex 和 Grid 更流行了）。比如经典的 clearfix 技巧：
.clearfix::after {
content: "";
display: table;
clear: both;
}此外，伪元素还经常用于创建视觉上的“叠加层”或“阴影”。例如，给按钮加上一个半透明的 hover 高亮层：
.button::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.3);
opacity: 0;
transition: opacity 0.3s;
}
.button:hover::after {
opacity: 1;
}这种做法可以避免增加额外 DOM 节点，保持结构干净。
注意事项与常见问题
- 伪元素不能被选中或聚焦，所以不适合放重要交互内容；
- content 可以为空字符串，但不能省略；
- 伪元素可以配合 attr() 使用，读取 HTML 属性内容，比如：
.tooltip::after {
content: attr(data-tip);
}- 伪元素层级问题：记得检查 z-index 和定位关系，尤其是在覆盖其他元素时。
基本上就这些。before 和 after 看似简单，但在实际项目中灵活运用能解决不少小问题，而且对页面结构影响小，值得一试。
