CSS `content` 属性：伪元素中的动态内容生成

CSS `content` 属性：伪元素的小宇宙，装得下整个世界

各位看官，今天咱们聊聊 CSS 里一个挺有意思的家伙，名叫 content。别看它个头小，却是个能屈能伸、变化多端的魔法师。尤其是搭配 CSS 伪元素 :before 和 :after，那简直是如虎添翼，能玩出各种花样。

说到伪元素，有些朋友可能觉得有点陌生，简单来说，它们就像 CSS 给 HTML 元素额外加的“分身”，但这些分身并不存在于 HTML 代码里，完全由 CSS 控制。 :before 在元素内容之前插入， :after 在元素内容之后插入。而 content 属性，就是控制这些分身里“装”什么的。

content 属性，到底能装啥？

content 属性就像一个小宇宙，理论上，只要是字符串、数字、或者某些特定的 CSS 函数，它都能装进去。让我们先从最简单的开始：

1. 字符串（String）：简单粗暴，直接展示

这是 content 最常用的用法，直接把字符串放进去，伪元素就会显示这些文字。

p:before {
  content: "注意：";
  color: red;
  font-weight: bold;
}

这段代码会在每个 <p> 标签的内容前面加上红色的、加粗的“注意：”字样。是不是有点像给文章自动添加了批注？

举个栗子：

假设你是个美食博主，经常写菜谱，为了提醒大家注意食材的用量，你可以这么玩：

.ingredient:before {
  content: "⚠️ "; /* unicode emoji 也可以！不过这里咱们先不用 */
  color: orange;
  font-size: 1.2em;
  margin-right: 5px;
}

这样，每个 .ingredient 类的元素前面都会出现一个橙色的警告符号，提醒读者注意。

2. url()：图片，让你的页面更生动

content 还能装图片！只要把图片的 URL 地址放进去，伪元素就会显示这张图片。

a:before {
  content: url("arrow.png");
  margin-right: 5px;
}

这段代码会在每个 <a> 标签的前面加上一个箭头图片，让链接看起来更醒目。

举个栗子：

你想给网站的每个链接都加上一个小图标，表示链接的类型（比如，外链用一个地球图标，下载链接用一个下载图标），就可以这么做：

a[href^="http"]:after { /* 选择所有 href 属性以 "http" 开头的 <a> 标签 */
  content: url("external-link.png");
  margin-left: 5px;
}

a[href$=".pdf"]:after { /* 选择所有 href 属性以 ".pdf" 结尾的 <a> 标签 */
  content: url("pdf-icon.png");
  margin-left: 5px;
}

3. attr()：读取 HTML 属性，变身“信息搬运工”

attr() 函数可以读取 HTML 元素的属性值，并把它们显示在伪元素里。这就像一个“信息搬运工”，把 HTML 里的信息搬到 CSS 里来。

a:after {
  content: " (" attr(href) ")";
  color: gray;
  font-size: 0.8em;
}

这段代码会在每个 <a> 标签的后面显示链接的 URL 地址，用括号括起来，颜色是灰色，字体大小是原来的 80%。这样，用户不用把鼠标悬停在链接上，也能知道链接指向哪里。

举个栗子：

你想给每个图片都加上一个标题，标题的内容来自图片的 alt 属性，可以这样做：

img:after {
  content: "图片描述：" attr(alt);
  display: block; /* 让伪元素独占一行 */
  text-align: center;
  font-style: italic;
  color: #666;
}

4. counter() 和 counters()：自动编号，让列表更有条理

counter() 和 counters() 函数可以用来自动编号。想象一下，你正在写一篇长篇大论，需要给每个章节、每个小节都编号，如果手动编号，那简直是噩梦。有了 counter() 和 counters()，一切都变得简单起来。

首先，你需要用 counter-reset 属性来初始化一个计数器。比如，你想给文章的每个 <h2> 标签都编号，可以这样做：

body {
  counter-reset: section; /* 初始化一个名为 "section" 的计数器 */
}

h2:before {
  counter-increment: section; /* 每次遇到 <h2> 标签，计数器加 1 */
  content: "第 " counter(section) " 章：";
  font-weight: bold;
  margin-right: 5px;
}

这段代码会在每个 <h2> 标签的前面加上“第 X 章：”字样，其中 X 是章节的编号。

counters() 函数则更强大，它可以处理嵌套的计数器，比如，你想给文章的每个 <h2> 标签编号，再给每个 <h3> 标签编号，并且 <h3> 标签的编号是基于 <h2> 标签的编号的，可以这样做：

body {
  counter-reset: section;
}

h2 {
  counter-reset: subsection; /* 每个 <h2> 标签都重置一个名为 "subsection" 的计数器 */
}

h2:before {
  counter-increment: section;
  content: "第 " counter(section) " 章：";
  font-weight: bold;
  margin-right: 5px;
}

h3:before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
  font-weight: bold;
  margin-right: 5px;
}

这段代码会在每个 <h2> 标签的前面加上“第 X 章：”字样，在每个 <h3> 标签的前面加上“X.Y ”字样，其中 X 是章节的编号，Y 是小节的编号。

举个栗子：

你想做一个在线教程，每个章节都有编号，每个小节也有编号，你可以用 counter() 和 counters() 来实现自动编号。

content 属性的“小心机”

content 属性虽然强大，但也有些需要注意的地方：

content 只能用于伪元素 :before 和 :after。 如果你把它用在其他元素上，它会默默地消失，就像没发生过一样。
content 的默认值是 normal，表示不显示任何内容。 所以，如果你想让伪元素显示内容，一定要显式地设置 content 属性。
content 生成的内容是“匿名替换元素”，它不会出现在 DOM 树中。 这意味着你不能用 JavaScript 来操作这些内容。
content 生成的内容会继承父元素的样式，但有些属性可能不会继承。 比如，font-size 和 color 可能会继承，但 width 和 height 则不会。

content 属性的应用场景：脑洞大开，无所不能

content 属性的应用场景非常广泛，只要你脑洞够大，就能玩出各种花样。

美化列表： 给列表项添加自定义的符号，让列表看起来更个性化。
添加提示信息： 在表单字段后面添加提示信息，帮助用户填写表单。
生成装饰性元素： 用 content 和伪元素来创建一些简单的图形，比如箭头、边框、背景等。
实现一些简单的动画效果： 通过改变 content 的值，来实现一些简单的动画效果。
增强可访问性： 用 content 来添加一些辅助信息，比如，给链接添加 aria-label 属性，帮助屏幕阅读器理解链接的含义。

总结：content 属性，CSS 的一颗闪耀之星

content 属性是 CSS 里一颗闪耀之星，它赋予了伪元素无限的可能。掌握了 content 属性，你就能更好地控制页面的外观，让你的网站更加个性化、美观、易用。

希望这篇文章能帮助你更好地理解 content 属性，并在实际项目中灵活运用它。记住，CSS 的世界是充满乐趣的，只要你敢于尝试，就能创造出无限的惊喜。祝你玩得开心！

CSS content 属性：伪元素的小宇宙，装得下整个世界

发表回复 取消回复

CSS `content` 属性：伪元素的小宇宙，装得下整个世界

发表回复取消回复