时间戳

首页 > 解决方案 > 如何在伪元素 ::before 和 ::after 中设置内联 SVG 的样式？

html - 如何在伪元素 ::before 和 ::after 中设置内联 SVG 的样式？

问题描述

我正在尝试在伪元素中设置 SVG 样式。

p::before {
  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' class='svg-check' viewBox='0 0 20 20'><path fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd' /></svg>");
  display: inline-block;
  height: 2rem;
  width: 2rem;
}

.svg-check {
  fill: green;
}
<div>
  <p>First</p>
  <p>Second</p>
</div>

CodePen 示例

我的问题是：

  1. 这可能吗？
  2. 如果是，如何？
  3. 如果没有，还有其他方法可以实现吗？

标签： htmlcsssvgpseudo-element

解决方案

关闭，分配一个空字符串，content然后使用背景图像。看这篇文章

p::before {
  content: '';
  display: inline-block;
  height: 2rem;
  width: 2rem;
  margin-right: 1rem;
  vertical-align: middle;
  background: url(https://cdn4.iconfinder.com/data/icons/basic-business-1/36/Checkmark_right_icon-512.svg) no-repeat;
  background-size: contain;
}     
<div>
  <p>First</p>
  <p>Second</p>
</div>

推荐阅读