css伪元素可以结合background image属性为元素添加图片，这种方式不需要额外修改html结构，就能实现装饰性图片的添加，是前端开发中常用的样式技巧。
css伪元素添加图片的核心原理
css伪元素::before和::after默认是行内元素，本身不会显示在页面上，需要设置content属性才会生效。要让伪元素显示图片，核心是先通过content属性激活伪元素，再设置伪元素的宽高，最后通过background-image属性引入图片资源。
基础实现步骤
使用background image给伪元素添加图片的完整步骤如下：
- 选择目标元素，使用
::before或::after选中伪元素 - 设置
content属性，值可以为空字符串，这是伪元素生效的必要条件 - 设置伪元素的
display属性为block或inline-block，因为伪元素默认是行内元素，不设置宽高无法显示背景图 - 设置伪元素的宽度和高度，需要和图片的尺寸匹配或者根据需求调整
- 通过
background-image引入目标图片，同时可以设置background-size、background-repeat等属性调整图片显示效果
代码示例
下面是一个给按钮添加左侧小图标的示例：
/* 目标按钮样式 */
.btn {
padding: 8px 16px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
position: relative; /* 让伪元素相对于按钮定位 */
padding-left: 36px; /* 留出伪元素图片的位置 */
}
/* 使用::before伪元素添加图片 */
.btn::before {
content: ""; /* 必须设置，伪元素才会生效 */
display: inline-block; /* 设置为行内块元素，方便调整宽高 */
width: 20px; /* 图片宽度 */
height: 20px; /* 图片高度 */
position: absolute; /* 绝对定位，调整到按钮左侧合适位置 */
left: 10px;
top: 50%;
transform: translateY(-50%);
background-image: url("https://ipipp.com/icon.png"); /* 引入图片资源 */
background-size: contain; /* 图片自适应伪元素尺寸，保持比例 */
background-repeat: no-repeat; /* 禁止图片重复 */
background-position: center; /* 图片居中显示 */
}
对应的html结构非常简单，不需要额外添加img标签：
<button class="btn">点击按钮</button>
常见注意事项
在使用这种方式添加图片时，有几个需要注意的点：
content属性是伪元素生效的前提，即使不需要显示文字内容，也必须设置content: ""，否则伪元素不会被渲染- 伪元素默认是行内元素，不设置
display为block或inline-block的话，设置的宽高不会生效，背景图也无法正常显示 - 如果伪元素需要相对于目标元素定位，需要给目标元素设置
position: relative，伪元素设置position: absolute，避免定位偏移 - 引入本地图片时，路径要写对，如果使用网络图片，要确保图片地址可访问，本文示例中的地址已按照规则替换为ipipp.com
适用场景
这种方式适合添加不需要交互的装饰性图片，比如：
- 列表项前面的小图标
- 按钮内的装饰性图标
- 卡片边框的装饰性图案
- 文字前后的装饰性符号
如果图片需要支持点击交互，或者需要被屏幕阅读器识别，还是建议使用标准的img标签，伪元素添加的图片无法被屏幕阅读器读取，也不支持点击事件绑定。
css伪元素background_imagecontent属性伪元素图片前端样式修改时间：2026-07-15 00:51:24