CSS中的::before和::after伪元素用法详解
在CSS开发中，::before和::after是两个非常实用的伪元素，很多开发者刚接触时会疑惑它们的作用和用法。简单来说，这两个伪元素可以向选中的元素添加额外的内容或样式，而这些内容并不会出现在HTML文档的实际结构中，仅通过CSS渲染呈现。
基本概念与核心特性
首先明确几个核心特性：
::before用于在选中元素的内容前面插入生成的内容::after用于在选中元素的内容后面插入生成的内容- 这两个伪元素必须配合
content属性使用，即使content的值为空，否则伪元素不会生效 - 伪元素生成的内容默认是行内元素，可以通过
display属性修改其显示类型 - 伪元素不属于DOM结构，无法通过JavaScript直接操作，也不会影响HTML文档的语义
基础用法示例
下面通过一个简单的例子演示::before和::after的基础使用，我们给一个普通段落的前后分别添加提示文本：
/* 选择class为demo的p元素 */
p.demo::before {
content: "【前置内容】";
color: #ff0000;
font-size: 14px;
}
p.demo::after {
content: "【后置内容】";
color: #0000ff;
font-size: 14px;
}对应的HTML结构如下：
<p class="demo">这是一段普通的文本</p>
浏览器渲染后的效果会是：【前置内容】这是一段普通的文本【后置内容】，其中前后添加的内容颜色分别为红色和蓝色，且这些内容不会出现在HTML源码里。
常见使用场景
1. 清除浮动
在早年的CSS布局中，经常用::after伪元素清除浮动，避免父元素高度塌陷的问题，这也是非常经典的使用场景：
/* 清除浮动的通用类 */
.clearfix::after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}当父元素内部有浮动子元素时，给父元素添加clearfix类即可自动清除浮动，不需要额外添加空的HTML标签。
2. 装饰性图标与角标
可以在不修改HTML结构的前提下，给元素添加装饰性的小图标或者角标，比如给链接后面添加一个外链标识：
/* 外链添加跳转图标 */
a.external-link::after {
content: " ↗";
font-size: 12px;
color: #666;
}
/* 新内容角标 */
.new-tag::before {
content: "NEW";
background-color: #ff4400;
color: #fff;
font-size: 12px;
padding: 2px 4px;
border-radius: 2px;
margin-right: 6px;
}对应的HTML只需要写：
<a href="https://ipipp.com" class="external-link">访问示例站点</a> <span class="new-tag">最新活动</span>
3. 自定义列表符号
默认的列表符号样式有限，我们可以用::before伪元素自定义列表项的前置符号：
ul.custom-list {
list-style: none;
padding-left: 0;
}
ul.custom-list li::before {
content: "•";
color: #00aa88;
font-size: 20px;
margin-right: 8px;
vertical-align: middle;
}这样每个列表项前面都会显示绿色的自定义圆点符号，无需使用背景图或者额外的HTML元素。
注意事项
- 伪元素的
content属性支持多种值类型，除了字符串，还可以是attr()获取元素属性值、url()引入图片、计数器counter()等，比如content: attr(data-tip);可以获取元素的data-tip属性值作为伪元素内容 - 伪元素无法被用户选中复制，因为它们不属于DOM实际内容，如果需要可复制的内容，还是应该放在HTML里
- 单冒号
:before、:after是CSS2的写法，双冒号::before、::after是CSS3的规范写法，为了兼容旧浏览器可以用单冒号，不过现代开发更推荐用双冒号区分伪元素和伪类（如:hover） - 伪元素上也可以设置
hover等交互样式，比如p.demo::before:hover { color: #ff6600; }，当鼠标悬停在伪元素上时也会触发样式变化