在网页排版中，css 的 content 属性主要用于伪元素（如 ::before 和 ::after），以动态生成并插入内容。本文将结合具体实例，深入讲解该属性的典型用法与实用场景，助你熟练掌握如何借助 content 实现文本、图标、计数编号及外部资源等多样化内容的注入与样式定制。

1、 首先搭建一个标准的 HTML5 页面结构，并在 中添加两个 <h2></h2> 标签作为演示目标。

2、 在 <style></style> 标签内编写 CSS 规则，为这两个标题的 ::before 伪元素设置 content 值，最终呈现效果如下图所示。

立即学习“前端免费学习笔记（深入）”；

3、 除常规文字外，content 还支持插入特殊符号（如 Unicode 字符）。示例中先声明所需符号，再通过 content 将其注入到指定位置。

4、 利用 content: url(...) 可直接嵌入图像资源，这是一种高频使用的技巧，实际渲染效果参见下图。

5、 content 还能结合 attr() 函数读取元素的自定义属性值并显示，尽管该方式使用频率不高，但在特定交互场景中仍具价值，效果如下图所示。

6、 借助 counter-increment 与 content: counter(...) 的配合，可为标题或列表项自动添加递增序号，如图所示，每个 <h1></h1> 元素前均会显示连续编号。

7、 总结来看，content 属性具备高度灵活性，涵盖纯文本、符号、图片、属性值及计数器等多种内容类型，开发者可根据项目需求自由组合与应用。