如何将 SVG 与 :before 或 :after 伪元素一起使用？

为了实现更好的代码组织和可维护性，我们通常会使用伪元素（:before 和 :after）来添加一些额外的样式或内容。而 SVG 是一种矢量图形格式，它可以用来创建各种图形和图标。那么如何将这两个东西结合起来使用呢？本文将为你介绍 SVG 与 :before 或 :after 伪元素的使用方法。

方法一：使用基础的 SVG 元素

最基础的使用方法是将 SVG 直接嵌入到伪元素的 content 属性中。如下所示：

.icon:before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40"/></svg>');
}

其中，content 属性的值使用了 data URI，目的是将 SVG 直接嵌入到 CSS 代码中。这种方法的缺点是代码比较长，而且不易维护。

方法二：使用 SVG 的 symbol 元素

SVG 的 symbol 元素可以定义一个可重复使用的图形片段，可以被多次引用和调用。我们可以将需要的图标定义为 symbol 元素，然后在伪元素中使用 use 元素引用它。如下所示：

.icon:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url('#icon');
  background-size: contain;
  background-repeat: no-repeat;
}

/* SVG 定义 */
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon" viewBox="0 0 24 24">
    <path d="M19 13H5v-2h14v2z"/>
    <path d="M0 0h24v24H0z" fill="none"/>
  </symbol>
</svg>

这种方法的好处是可以将 SVG 代码独立出来，方便维护和重复使用。

方法三：使用 SVG 的 data URIs

我们可以将 SVG 代码转换成 data URI 格式，然后将它嵌入到伪元素的 content 属性中。如下所示：

.icon:before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40"/></svg>');
}

这种方法类似于方法一，只不过将 SVG 转换成了 data URI 格式，仍然比较长并且不易维护。

总结

以上三种方法都可以将 SVG 与 :before 或 :after 伪元素一起使用。其中，使用 symbol 元素的方法最为推荐，因为它可以将 SVG 代码独立出来，方便维护和重复使用。而其他两种方法则可以在需要时使用。