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

Question

我正在尝试在伪元素中设置 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 Sample

我的问题是：

1. 这可能吗？
2. 如果是，怎么做？
3. 如果没有，有没有其他方法 达到同样的效果？

Answer 1

关闭，为content 分配一个空字符串，然后使用背景图像。看到这个article

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>