css伪元素content属性怎么设置内容

css伪元素的content属性是配合::before和::after伪元素使用的核心属性，只有设置了content属性，伪元素才会被渲染到页面中。content属性支持多种内容类型，不同内容类型的语法规则存在差异，下面逐一介绍常见的设置方法。

设置纯文本内容

这是content属性最基础的用法，直接给content赋值字符串即可，字符串需要用单引号或者双引号包裹。

/* 给类名为tip的元素前添加提示文本 */
.tip::before {
    content: "提示：";
    color: #ff6600;
    margin-right: 5px;
}

设置图片内容

content属性支持通过url()函数引入图片作为伪元素的内容，图片会按照伪元素的尺寸规则渲染。

/* 给链接后添加跳转图标 */
a.external::after {
    content: url("https://ipipp.com/icon/link.png");
    margin-left: 3px;
    vertical-align: middle;
}

设置元素属性值内容

可以通过attr()函数获取元素的某个属性值，将其作为伪元素的内容，常用于展示自定义属性的值。

/* 展示data-tip自定义属性的值 */
[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    background: #333;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    top: -30px;
    left: 0;
}

设置计数器内容

content属性可以配合counter()函数使用计数器，实现自动编号的效果，常用于列表序号、章节编号等场景。

/* 初始化计数器 */
ol.list {
    counter-reset: item;
    list-style: none;
    padding-left: 0;
}
/* 给每个列表项前添加计数器内容 */
ol.list li::before {
    counter-increment: item;
    content: counter(item) ". ";
    color: #0066cc;
    margin-right: 8px;
}

设置特殊字符内容

content属性支持直接写入Unicode字符，用来展示特殊符号，不需要额外引入图标库。

/* 给选中项前添加对勾符号 */
.selected::before {
    content: "2714";
    color: #00cc66;
    margin-right: 5px;
}

多内容组合设置

content属性支持同时组合多种类型的内容，不同内容之间用空格分隔即可。

/* 同时展示图标和文本 */
.info::before {
    content: url("https://ipipp.com/icon/info.png") " 信息：";
    display: flex;
    align-items: center;
    gap: 5px;
}

使用注意事项

• content属性只有在::before和::after伪元素中才会生效，其他元素设置该属性无效
• 如果不需要显示任何内容，可以设置content: ""，此时伪元素仍然存在，可用于实现纯样式效果比如清除浮动
• content属性设置的内容无法被用户选中复制，属于装饰性内容，不要用来展示核心业务信息

css伪元素content属性content_设置方法修改时间：2026-07-16 01:03:20