**CSS** `content` 属性进阶：在伪元素中嵌入图片与变量

CSS `content` 属性进阶：在伪元素中玩转图片与变量，让你的网页活起来！

各位看官，各位靓仔靓女，今天咱们来聊聊 CSS 里一个神奇又低调的属性：content。别看它就短短几个字母，能量可大了！你可能见过它默默地给你的列表加上小圆点，或者在链接旁边添个小箭头。但今天，我们要玩点更高级的，让 content 在伪元素里大放异彩，嵌入图片，玩转变量，让你的网页瞬间鲜活起来！

content 是什么？为啥它这么重要？

简单来说，content 属性是 CSS 中用来在元素内部（注意，是内部哦！）插入内容的。它可以和 ::before 和 ::after 这两个伪元素配合使用，在元素的内容之前或者之后插入文本、图片、甚至是其他元素。

如果没有 content，::before 和 ::after 就形同虚设，就像空有一身武艺却无处施展的侠客。content 就是那个让侠客找到用武之地的关键！

为啥要用伪元素和 content？

你可能会问：“我直接在 HTML 里写内容不就得了？干嘛这么麻烦？” 这就涉及到 CSS 的一个核心思想：关注样式，分离内容。

结构更清晰: 把纯粹的装饰性内容放到 CSS 里，HTML 专注于语义化的结构，让代码更容易维护和理解。
样式复用性更高: 如果多个元素都需要相同的装饰性内容，只需要在 CSS 里定义一次，就能应用到所有元素上，避免了重复的代码。
动态性: 配合 CSS 变量，content 可以根据不同的状态或者数据动态地改变内容，让你的网页更加灵活。

嵌入图片：让伪元素不再“空虚寂寞冷”

好，废话不多说，直接上干货！咱们先来学习怎么用 content 在伪元素里嵌入图片。

.my-element::before {
  content: url("images/my-image.png");
  display: inline-block; /* 重要！让图片显示出来 */
  width: 50px;
  height: 50px;
  margin-right: 10px;
  vertical-align: middle; /* 让图片和文字垂直居中 */
}

这段代码的意思是：在 .my-element 元素的内容之前插入一张图片，图片的路径是 "images/my-image.png"。

注意点：

display: inline-block; 非常重要！ 默认情况下，伪元素是 inline 元素，它不会占据空间，所以你插入的图片也看不到。设置成 inline-block 才能让图片正常显示。
width 和 height 属性用来控制图片的大小。
margin-right 用来控制图片和元素内容之间的距离。
vertical-align: middle; 可以让图片和文字垂直居中，看起来更美观。

举个栗子：给链接加上小图标

现在很多网站都会在链接旁边加上小图标，表示链接的类型，比如外部链接、下载链接等等。用 content 就可以轻松实现：

<a href="https://www.example.com" class="external-link">外部链接</a>
<a href="download.pdf" class="download-link">下载文件</a>

.external-link::after {
  content: url("images/external-link.png");
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  vertical-align: middle;
}

.download-link::after {
  content: url("images/download.png");
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  vertical-align: middle;
}

这样，每个外部链接后面都会自动加上一个小图标，表示这是一个外部链接，下载链接后面也会加上相应的图标。是不是很方便？

玩转变量：让 content 动起来！

光是嵌入图片还不够，content 还可以和 CSS 变量结合使用，让你的网页更加灵活和智能。

什么是 CSS 变量？

CSS 变量（也叫自定义属性）是一种在 CSS 中定义变量的方式，可以在整个样式表中重复使用。它的语法是 --变量名: 变量值;。

为什么要用 CSS 变量？

提高代码的可维护性: 如果你需要修改某个颜色或者尺寸，只需要修改变量的值，所有用到这个变量的地方都会自动更新。
实现主题切换: 可以通过修改变量的值来切换不同的主题。
动态改变样式: 可以通过 JavaScript 来修改变量的值，从而动态改变样式。

用 CSS 变量控制 content 的内容

<div class="my-element" data-text="Hello World!"></div>

.my-element::before {
  content: attr(data-text); /* 获取 data-text 属性的值 */
  display: block;
  font-size: 20px;
  color: red;
}

这段代码的意思是：在 .my-element 元素的内容之前插入一个文本，文本的内容是 .my-element 元素的 data-text 属性的值。

attr() 函数

这里用到了一个非常重要的函数：attr()。它可以获取 HTML 元素的属性值，并将它作为字符串返回。

举个栗子：动态显示元素的 title 属性

<a href="#" title="这是一个链接">链接</a>

a::after {
  content: " (" attr(title) ")"; /* 在链接后面显示 title 属性的值 */
  color: gray;
  font-size: 12px;
}

这样，鼠标悬停在链接上时，除了浏览器默认显示的 title 提示框之外，链接后面还会显示 title 属性的值，让用户更清楚地了解链接的内容。

更高级的玩法：用 CSS 变量控制图片的路径

<div class="my-element" style="--image-url: url('images/my-image.png')"></div>

.my-element::before {
  content: var(--image-url); /* 使用 CSS 变量作为图片的路径 */
  display: inline-block;
  width: 50px;
  height: 50px;
}

这段代码的意思是：在 .my-element 元素的内容之前插入一张图片，图片的路径是 my-element 元素的 --image-url 变量的值。

解释：

我们在 HTML 元素上使用 style 属性定义了一个 CSS 变量 --image-url，它的值是图片的路径。
在 CSS 中，我们使用 var() 函数来获取 CSS 变量的值，并将它作为 content 的值。

这样做的好处是： 你可以通过 JavaScript 动态地修改 --image-url 变量的值，从而动态地改变图片。

举个栗子：根据用户的选择动态切换图片

假设你有一个网站，用户可以选择不同的主题，每个主题对应不同的图片。你可以用 CSS 变量来实现动态切换图片的功能：

<button onclick="changeTheme('light')">Light Theme</button>
<button onclick="changeTheme('dark')">Dark Theme</button>

<div class="my-element"></div>

:root {
  --image-url: url('images/light-theme.png'); /* 默认主题 */
}

.my-element::before {
  content: var(--image-url);
  display: inline-block;
  width: 50px;
  height: 50px;
}

function changeTheme(theme) {
  if (theme === 'light') {
    document.documentElement.style.setProperty('--image-url', 'url("images/light-theme.png")');
  } else if (theme === 'dark') {
    document.documentElement.style.setProperty('--image-url', 'url("images/dark-theme.png")');
  }
}

解释：

我们定义了一个全局的 CSS 变量 --image-url，它的默认值是 light 主题的图片路径。
在 JavaScript 中，我们通过 document.documentElement.style.setProperty() 方法来修改 --image-url 变量的值，从而动态地改变图片。

一些注意事项和技巧

content 只能插入文本、图片、计数器等，不能插入 HTML 元素。 如果你想插入 HTML 元素，只能通过 JavaScript 来实现。
content 的值可以是字符串、url()、counter()、attr() 等等。 可以根据你的需求选择合适的值。
content 可以和 quotes 属性一起使用，实现自动添加引号的功能。 比如：quotes: "“" "”"; content: open-quote; 会在元素内容之前添加一个左引号，在元素内容之后添加一个右引号。
content 可以和 counter() 函数一起使用，实现自动编号的功能。 比如：counter-increment: my-counter; content: counter(my-counter) ". "; 会在元素内容之前添加一个编号，并自动递增。
不要滥用伪元素和 content。 如果内容是重要的、语义化的，应该放到 HTML 里。只有装饰性的、非重要的内容才应该放到 CSS 里。

总结

content 属性是一个非常强大和灵活的 CSS 属性，它可以让你在伪元素里插入各种各样的内容，实现各种各样的效果。掌握了 content 属性，你就可以让你的网页更加生动、有趣和智能。

希望这篇文章能给你带来一些新的启发和灵感，让你在 CSS 的世界里玩得更开心！记住，CSS 不是枯燥的代码，而是一种充满创造力和想象力的艺术！加油！各位！

CSS `content` 属性进阶：在伪元素中嵌入图片与变量

CSS `content` 属性进阶：在伪元素中玩转图片与变量，让你的网页活起来！

发表回复取消回复

CSS content 属性进阶：在伪元素中玩转图片与变量，让你的网页活起来！

发表回复 取消回复

CSS `content` 属性进阶：在伪元素中玩转图片与变量，让你的网页活起来！

发表回复取消回复