CSS 在 :pseudo-element 的内容中选择 SVG

Question

div:before
{
    content: url(path_to_my_svg);
}

有没有办法选择 :pseudo-element 内容内的 SVG？ 喜欢：

div:before svg
{
    ...
}

Answer 1

在以下示例中，我使用此 SVG 的数据 URI：

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="orange"/>
</svg>

SVG 可以是

:before

选择器的内容，也可以用作同一选择器的背景图像。

这也应该适用于普通的相对或绝对 URL，但您可能应该拥有具有相同来源的所有内容。

.test01:before {
  content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgZmlsbD0ib3JhbmdlIi8+Cjwvc3ZnPg==');
  display: inline-block;
  width: 1em;
  height:1em;
}

.test02:before {
  content: "";
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgZmlsbD0ib3JhbmdlIi8+Cjwvc3ZnPg==');
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  width: 1em;
  height:1em;
}

<div class="test01">Test01</div>
<div class="test02">Test02</div>