在前端页面开发中，为元素添加图标是常见的需求，传统方式多使用img标签或者引入图标字体库，而借助css的::before伪元素和content属性，可以在不增加额外HTML标签的情况下实现图标添加，这种方式更轻量且易于维护。
::before伪元素与content属性基础
::before是css的伪元素，用于在选中元素的内容之前插入生成的内容，而content属性则是为伪元素指定要插入的内容，二者必须配合使用，缺少content的伪元素不会生效。
基本语法结构如下：
/* 选中目标元素，使用::before伪元素 */
.target-element::before {
content: "插入的内容"; /* 必须设置，否则伪元素不显示 */
/* 其他样式属性 */
}
content属性支持的常用值
- 字符串：直接插入文本内容，比如
content: "★" - Unicode字符：插入对应的Unicode符号，格式为
content: "XXXX"，XXXX为Unicode编码 - 空值：
content: ""，常用于仅需要伪元素的样式而不需要内容时 - attr()函数：获取元素的属性值作为内容，比如
content: attr(data-icon)
用::before与content添加图标的常见场景
场景1：添加纯文本装饰图标
如果需要的图标是简单的符号或者文字，可以直接在content中写入对应内容，再通过样式调整位置和样式。
示例：为所有列表项前添加星号图标
<ul class="icon-list">
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ul>
对应的css代码：
.icon-list li {
position: relative;
padding-left: 20px;
list-style: none;
}
.icon-list li::before {
content: "★"; /* 星号作为图标 */
position: absolute;
left: 0;
color: #ff4400;
font-size: 14px;
}
场景2：添加Unicode图标
Unicode字符集中包含大量符号类图标，通过content写入对应的Unicode编码即可实现图标添加，不需要额外引入资源。
示例：为按钮添加箭头图标
<button class="arrow-btn">查看更多</button>
对应的css代码：
.arrow-btn {
padding-right: 25px;
position: relative;
background: #1677ff;
color: #fff;
border: none;
padding: 8px 25px 8px 15px;
border-radius: 4px;
cursor: pointer;
}
.arrow-btn::before {
content: "2192"; /* 右箭头Unicode编码 */
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
}
场景3：结合背景图添加自定义图标
如果需要使用自定义的图片图标，可以将content设为空值，再通过background属性设置图标图片，这种方式可以灵活控制图标大小和显示效果。
示例：为链接添加外部链接图标
<a href="https://ipipp.com" class="external-link">访问示例网站</a>
对应的css代码：
.external-link {
padding-right: 22px;
position: relative;
color: #1677ff;
text-decoration: none;
}
.external-link::before {
content: ""; /* 空内容，仅用伪元素承载背景图 */
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background: url("https://ipipp.com/favicon.ico") no-repeat center/cover;
}
使用注意事项
- ::before伪元素生成的内容不属于DOM节点，无法通过JavaScript直接操作，也不会被屏幕阅读器默认读取，装饰性图标适合使用这种方式，功能性图标需额外做无障碍处理。
- content属性的值如果包含HTML标签，不会被解析为标签，只会作为纯文本显示，比如
content: "<span>图标</span>"会直接显示文本而非span元素。 - 伪元素默认是行内元素，如果需要设置宽高，需要将其display属性设置为inline-block或者block。
- 如果元素本身设置了contenteditable属性，::before生成的内容不会被用户编辑，也不会被包含在元素的innerHTML中。
常见问题解答
为什么设置了::before却没有显示？
首先检查是否设置了content属性，没有content的伪元素不会渲染；其次检查伪元素的颜色是否与背景色一致，或者是否被其他元素遮挡；另外如果父元素设置了overflow: hidden，也可能导致伪元素超出部分被隐藏。
可以同时使用::before和::after添加两个图标吗？
可以，::before和::after是两个独立的伪元素，分别设置content和样式即可，比如可以在元素前加一个图标，元素后加另一个图标，二者互不影响。