我想使用::before在一些选定的元素之前放置SVG图像:

#mydiv::before {
  content: '<svg ... code here</svg>';
  display: block;
  width: 22px;
  height: 10px;
  margin: 10px 5px 0 10px;
}

上面的代码只显示明文。 我检查了规范,似乎有一些限制什么内容可以。CSS内容属性解决方案是可取的。


当前回答

我今天刚刚注意到,这里的一家报纸使用SVG直接注入到::before和::after伪元素中,为文章中突出显示的内容呈现程式化的引用。我试图通过whatcms.org找到这篇论文的CMS,但无济于事。然而,我可以说,所有者报纸-一个大型的国家,甚至国际,报纸使用CMS称为DM Polopoly。

在内容元素中输入SVG数据似乎比空白内容并使用SVG作为背景图像要费力得多。我想知道他们为什么选择这种方法——这种方法有什么好处。我在谷歌链接上看到一些人说,在伪元素上悬停时操纵SVG图像很容易…但我没有看到这种“好处”的绝佳例子。

本文提供了一种更简单的插入SVG作为内容的方法。 它使用缩放属性来调整图像的大小。

其他回答

为了进一步扩展这个主题。如果你想添加字体Awesome 5图标,你需要添加一些额外的CSS。

图标默认有svg-inline——fa和fa-w-*类。

还有像fa-lg, fa-rotate-*等修饰符类。您需要检查svg-with-js.css文件并为其找到合适的CSS。

你需要为css图标添加自己的颜色,否则它将默认为黑色,例如fill='%23f00',其中%23编码为#。

h1::before{ /* svg-inline--fa */ display:inline-block; font-size:inherit; height:1em; overflow:visible; vertical-align:-.125em; /* fa-w-14 */ width:.875em; /* Icon */ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23f00' d='M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zM264 408c0 22.1-17.9 40-40 40s-40-17.9-40-40v-48c0-22.1 17.9-40 40-40s40 17.9 40 40v48z'%3E%3C/path%3E%3C/svg%3E"); /* Margin */ margin-right:.75rem; } <h1>Lorem Ipsum</h1>

我今天刚刚注意到,这里的一家报纸使用SVG直接注入到::before和::after伪元素中,为文章中突出显示的内容呈现程式化的引用。我试图通过whatcms.org找到这篇论文的CMS,但无济于事。然而,我可以说,所有者报纸-一个大型的国家,甚至国际,报纸使用CMS称为DM Polopoly。

在内容元素中输入SVG数据似乎比空白内容并使用SVG作为背景图像要费力得多。我想知道他们为什么选择这种方法——这种方法有什么好处。我在谷歌链接上看到一些人说,在伪元素上悬停时操纵SVG图像很容易…但我没有看到这种“好处”的绝佳例子。

本文提供了一种更简单的插入SVG作为内容的方法。 它使用缩放属性来调整图像的大小。

使用一个空内容的背景蒙版图像,你可以在css中控制颜色:(不要忘记你喜欢的位置,宽度和高度)…!

background-color: red;
-webkit-mask-image: url(icon.svg);
mask-image: url(icon.svg);
content:'';

使用CSS sprites和data uri提供了额外的有趣的好处,如快速加载和更少的请求,我们通过使用image/base64获得IE8支持:

使用SVG编写代码

HTML

<div class="div1"></div>
<div class="div2"></div>

CSS

.div1:after, .div2:after {
  content: '';
  display: block;
  height: 80px;
  width: 80px;
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20height%3D%2280%22%20width%3D%22160%22%3E%0D%0A%20%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22red%22%20%2F%3E%0D%0A%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22blue%22%20%2F%3E%0D%0A%3C%2Fsvg%3E);
}
.div2:after {
  background-position: -80px 0;
}

对于IE8,更改如下:

  background-image: url(data:image/png;base64,data......);

您可以添加SVG作为空的:after或:before的背景图像。

给你:

.anchor:before {
  display: block;
  content: ' ';
  background-image: url('../images/anchor.svg');
  background-size: 28px 28px;
  height: 28px;
  width: 28px;
}