生成内容属性

最后更新：2026-09-13

content 生成内容属性

content 属性用于在元素的前后插入生成的内容，是 ::before 和 ::after 伪元素的必备属性。它可以插入字符串、图片、计数器值或引用属性值，常用于添加装饰性内容、清除浮动或显示链接地址，而无需改动 HTML 结构。

分类
初始值	normal
继承	否
适用于
可动画
CSS 版本	CSS2
状态	标准

📝 语法

content: normal | none | <string> | <image> | counter() | attr() | open-quote | close-quote | no-open-quote | no-close-quote;

⚙️ 取值

值	类型	描述
`normal \| none \| <string> \| <image> \| counter() \| attr() \| open-quote \| close-quote \| no-open-quote \| no-close-quote`	关键字	生成内容

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
content	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： content 只对 ::before 和 ::after 伪元素生效，省略 content 属性会导致伪元素无法生成。

重要： 通过 content 插入的内容不会被屏幕阅读器朗读，不应放置对理解页面有关键意义的信息。

❓ 常见问题

Qcontent 属性和直接写在 HTML 里有什么区别？

A通过 content 插入的内容属于表现层，不会出现在 DOM 中，不能被用户选中复制，也不会被搜索引擎抓取，适合装饰性内容（图标、前后缀符号、计数编号）。承载关键信息的内容必须写在 HTML 中，且 content 插入的内容屏幕阅读器不一定朗读，不应用来传递核心语义。

Q如何用 content 插入图片？

A使用 content: url(image.png); 即可在伪元素位置插入图片，常用于链接或标题前加小图标。但 url() 无法控制图片大小和对齐；更推荐 content: "" 配合 background-image + background-size 绘制，或用字体图标（iconfont）、内联 SVG。

Q为什么 ::before/::after 必须写 content: ""？

A伪元素只有设置了 content 才会真正生成，即使内容是空字符串 ""，否则整个伪元素不渲染。空 content 的常见用途：配合 position 画装饰元素、清除浮动（content: "" + display: table）、为 background 图标占位。content 是伪元素存在的"开关"。

Qcontent 支持哪些值？

A支持字符串（如 "✓"）、图片 url()、计数器 counter(name)/counters()、属性值 attr(href)、引号关键字 open-quote/close-quote、以及 normal 和 none。attr() 只能读取字符串类属性，常用于打印样式在链接后显示完整 URL。