在html5的页面开发中，::before伪元素是非常实用的CSS特性，它允许我们在不修改原有HTML结构的前提下，在目标元素的内容前面插入自定义的内容或者装饰样式，能够大幅减少冗余的HTML标签，让代码结构更简洁。
::before伪元素的基本语法
::before伪元素需要和CSS选择器配合使用，它的基本写法是在目标选择器后加上::before，然后设置对应的样式属性。需要注意的是，::before是CSS3的规范写法，CSS2中使用的单冒号:before也兼容，但推荐使用双冒号的规范写法。
基本语法结构如下：
/* 选择类名为box的元素，在其内容前插入内容 */
.box::before {
/* content是::before的必填属性，即使没有内容也要设置为空字符串 */
content: "前缀内容";
/* 其他样式属性 */
color: #ff0000;
margin-right: 8px;
}
核心属性content的使用规则
content是::before伪元素中最重要的属性，没有content属性，::before伪元素不会生效。content的取值有多种类型，常见的有以下几种：
- 字符串内容：直接写入文本字符串，比如
content: "提示："，会在元素前显示对应的文本。 - 空字符串：如果只需要添加装饰样式不需要文本内容，可以设置
content: ""，这是实现装饰效果最常用的方式。 - 属性值引用：可以通过
attr(属性名)获取目标元素的某个属性值作为内容，比如content: attr(data-tip)，会显示目标元素的data-tip属性的值。 - 特殊符号或图标：可以结合字体图标使用，比如设置
content: "e601"，配合对应的图标字体库显示图标。
常见使用场景示例
场景1：添加文本前缀
比如我们需要给所有提示类的段落前面加上“提示：”的前缀，不需要在每个<p>标签里手动添加文本，用::before就能统一实现。
HTML结构：
<p class="tip">今天气温较高，注意防暑</p> <p class="tip">出门记得携带雨伞</p>
CSS样式：
.tip::before {
content: "提示：";
color: #ff6600;
font-weight: bold;
margin-right: 5px;
}
场景2：添加装饰性图形
如果需要在列表项前面添加自定义的小圆点或者其他装饰图形，不需要用额外的<span>标签，用::before配合空content和背景样式就能实现。
HTML结构：
<ul class="custom-list">
<li>首页</li>
<li>产品中心</li>
<li>关于我们</li>
</ul>
CSS样式：
.custom-list {
list-style: none;
padding-left: 0;
}
.custom-list li {
position: relative;
padding-left: 20px;
margin-bottom: 10px;
}
.custom-list li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
background-color: #1890ff;
border-radius: 50%;
}
场景3：引用元素属性值
比如我们给链接元素添加href属性的提示，在链接后面显示对应的链接地址，用attr()函数就能实现。
HTML结构：
<a href="https://ipipp.com" class="link">访问示例网站</a>
CSS样式：
.link::after {
content: "（链接地址：" attr(href) "）";
font-size: 12px;
color: #999;
margin-left: 5px;
}
使用注意事项
::before伪元素生成的内容不属于DOM节点，无法通过JavaScript直接获取和操作，只能通过CSS控制样式。- 如果目标元素设置了
display: none，那么::before伪元素也不会显示。 ::before伪元素的定位默认是行内元素，如果需要设置宽高，需要手动设置display: block或者display: inline-block。- 不要滥用
::before伪元素插入大量文本内容，它更适合添加装饰性内容或者简短的辅助文本，复杂内容还是建议用正常的HTML元素实现。
总结：
::before伪元素是html5开发中优化代码结构的好工具，只要掌握content属性的用法，就能灵活实现元素前的内容添加和装饰效果，减少不必要的HTML标签冗余。
html5::before伪元素CSS_content修改时间：2026-07-10 21:36:36