有没有办法在伪元素 ::before 或 ::after 中使用 SVG 作为内容
我想使用 ::before 将 SVG 图像放置在某些选定元素之前：
#mydiv::before {
content: '<svg ... code here</svg>';
display: block;
width: 22px;
height: 10px;
margin: 10px 5px 0 10px;
}
上面的代码只显示纯文本。
我检查了规范，似乎对 content 的内容有一些限制。 CSS content 属性解决方案更可取。
是的你可以！刚刚测试过，效果很好，太棒了！它仍然不适用于 html，但它适用于 svg。
SVG URL encoder 来格式化您自己的 SVG，如此处所示。
#test::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy=' 50' r='40' stroke='black' stroke-width='2' fill='red'/%3E%3Cpolyline points='20,20 40,25 60,40 80,120 120,140 200,180' style='fill:无；中风：黑色；中风宽度：3'/%3E%3C/svg%3E ");宽度：200px；高度：200px； }
您可以使用 url() CSS 函数。
#mydiv::before {
content: url("data:image/svg+xml; utf8, <svg ... code here</svg>");
display: block;
width: 22px;
height: 10px;
margin: 10px 5px 0 10px;
}
确保您的 SVG 不包含任何 # 符号。使用像 this one 这样的编码器。
xmlns='http://www.w3.org/2000/svg'在 Chrome 66.x 中工作的一部分。例如 - 小 V 形将是：content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='white'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");
# urlencodes 到 %23，并且还必须删除所有换行符。
您可以将 SVG 添加为空 :after 或 :before 的 background-image。
干得好：
.anchor:before {
display: block;
content: ' ';
background-image: url('../images/anchor.svg');
background-size: 28px 28px;
height: 28px;
width: 28px;
}
background-size。这太令人沮丧了。
url("data:image/svg+xml; utf8, <svg.. code here</svg>");
<div class="author_">Lord Byron</div>
.author_ { font-family: 'Playfair Display', serif;字体大小：1.25em；字体粗细：700；字母间距：0.25em；字体样式：斜体；位置：相对；边距顶部：-0.5em；颜色：黑色; z-索引：1；溢出：隐藏；文本对齐：居中； } .author_:after{ 左：20px;保证金：0 -100% 0 0；显示：内联块；高度：10px；内容：url（数据：图像/svg+xml，%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120px%22%20height%3D %2220px%22%20viewBox%3D%220%200%201200%20200%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20 %3Cpath%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20d%3D%22M1145%2085c17%2C7%208%2C24%20-4%2C29%20 -12%2C4%20-40%2C6%20-48%2C-8%20-9%2C-15%209%2C-34%2026%2C-42%2017%2C-7%2045%2C-6 %2062%2C2%2017%2C9%2019%2C18%2020%2C27%201%2C9%200%2C29%20-27%2C52%20-28%2C23%20-52%2C34%20-102%2C33%20 -49%2C0%20-130%2C-31%20-185%2C-50%20-56%2C-18%20-74%2C-21%20-96%2C-23%20-22%2C -2%20-29%2C-2%20-56%2C7%20-27%2C8%20-44%2C17%20-44%2C17%20-13%2C5%20-15%2C7%20-40 %2C16%20-25%2C9%20-69%2C14%20-120%2C11%20-51%2C-3%20-126%2C-23%20-181%2C-32%20-54%2C -9%20-105%2C-20%20-148%2C-23%20-42%2C-3%20-71%2C1%20-104%2C5%20-34%2C5%20-65%2C15 %20-98%2C22%22%2F%3E%0A%3C%2Fsvg%3E%0A); } .author_:before { 右：20px;保证金：0 0 0 -100%；显示：内联块；高度：10px；内容：url（数据：图像/svg+xml，%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120px%22%20height%3D %2220px%22%20viewBox%3D%220%200%201200%20130%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20 %3Cpath%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20d%3D%22M55%2068c-17%2C6%20-8%2C23%204%2C28 %2012%2C5%2040%2C7%2048%2C-8%209%2C-15%20-9%2C-34%20-26%2C-41%20-17%2C-8%20-45%2C -7%20-62%2C2%20-18%2C8%20-19%2C18%20-20%2C27%20-1%2C9%200%2C29%2027%2C52%2028%2C23%2052%2C33%20102 %2C33%2049%2C-1%20130%2C-31%20185%2C-50%2056%2C-19%2074%2C-21%2096%2C-23%2022%2C-2%2029%2C-2 %2056%2C6%2027%2C8%2043%2C17%2043%2C17%2014%2C6%2016%2C7%2041%2C16%2025%2C9%2069%2C15%20120%2C11%2051%2C-3%20126%2C -22%20181%2C-32%2054%2C-9%20105%2C-20%20148%2C-23%2042%2C-3%2071%2C1%20104%2C6%2034%2C4%2065%2C14%2098 %2C22%22%2F%3E%0A%3C%2Fsvg%3E%0A); }
用于 SVG 编码的便捷工具url-encoder
使用 CSS sprites 和 data uri 提供了额外有趣的好处，例如快速加载和更少的请求，并且我们通过使用 image/base64 获得了 IE8 支持：
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......);
scale svg 搜索 SO，您会发现更多方法
进一步扩展这个话题。如果你想添加 Font 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;字体大小：继承；高度：1em；溢出：可见；垂直对齐：-.125em； /* fa-w-14 */ 宽度:.875em; /* 图标 */ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath 填充='％23f00'd ='M400 256H152V152.9C0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.1 72.7 72v16c0 13.7 24 24 24 24 24 24 24H32C13.3 0 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-right:.75rem; }
Lorem Ipsum
小心所有其他答案在 IE 中都有问题。
让我们有这种情况 - 带有前置图标的按钮。所有浏览器都能正确处理这个问题，但 IE 采用元素的宽度并缩放之前的内容以适应它。 JSFiddle
#mydiv1 { width: 200px; height: 30px; background: green; }
#mydiv1:before {
content: url("data:url or /standard/url.svg");
}
解决方案是将大小设置为元素之前并将其保留在原处：
#mydiv2 { width: 200px; height: 30px; background: green; }
#mydiv2:before {
content: url("data:url or /standard/url.svg");
display: inline-block;
width: 16px; //only one size is alright, IE scales uniformly to fit it
}
background-image + background-size 解决方案也可以，但有点不方便，因为您必须指定两次相同的尺寸。
IE11 中的结果：
https://i.stack.imgur.com/EA4lN.png
虽然这是很多年前的事了，我也想分享一下。
上面的答案是正确的，您可以直接将编码的 svg 字符串附加到 css 内容属性中。对于那些对 URL 有任何问题的人，可能是因为空格和字符对此无效，在这种情况下，请将您解码的 SVG 代码粘贴到：https://mothereff.in/url
使用编码的 SVG URL，它应该可以正常工作。不正确和正确的例子：
#incorrect::before {
content: url(
data:image/svg + xml,
<svgid="Layer_1"data-name="Layer 1"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 15.37 188.41"><defs><style>.cls-1{fill:#aeadad;}</style></defs><circleclass="cls-1"cx="7.69"cy="7.69"r="7.69"/><rectclass="cls-1"x="6.69"y="27.72"width="2"height="160.69"/></svg>
);
}
#correct::before {
content: url(data:image/svg+xml,%0A%3Csvg%20id%3D%22Layer%5f1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2015.37%20188.41%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23aeadad%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ccircle%20class%3D%22cls-1%22%20cx%3D%227.69%22%20cy%3D%227.69%22%20r%3D%227.69%22%2F%3E%3Crect%20class%3D%22cls-1%22%20x%3D%226.69%22%20y%3D%2227.72%22%20width%3D%222%22%20height%3D%22160.69%22%2F%3E%3C%2Fsvg%3E%0A);
}
<svg width="30" ... 它的颜色或填充属性我也无法通过外部 css 表更改。定位至少有效。有什么想法吗？
我今天刚刚注意到，这里的一家报纸使用将 SVG 直接注入 ::before 和 ::after 伪元素来为文章中突出显示的内容呈现风格化的引号。我试图通过 whatcms.org 找到该论文的 CMS，但无济于事。但是我可以说，所有者报纸 - 一家大型的全国性甚至国际性报纸使用名为 DM Polopoly 的 CMS。
将 SVG 数据输入到内容元素中似乎比将内容空白并使用 SVG 作为背景图像要费力得多。我想知道他们为什么选择这种方法——这样做有什么好处。我在 Google 链接上看到一些人说，在将 SVG 图像悬停在 pseudo-element 上时，它可以很容易地操纵 SVG 图像。 . .但我没有看到这种“好处”的杀手级例子。
This article 有一种更简单的方法将 SVG 作为内容插入。它使用缩放属性来调整图像的大小。
.myDiv {
display: flex;
align-items: center;
}
.myDiv:before {
display: inline-block;
content: url(./dog.svg);
margin-right: 15px;
width: 10px;
}
关注公众号
不定期副业成功案例分享
content: url(path/to/my.svg)。不过，这并不一定意味着它可以与 jQuery UI 工具提示库一起使用。content: url(mysprite.svg#my-icon)实际上不会拉起您的图标。我很想被证明是错误的，但是:)content:url("data:image/svg+xml,<svg width='10' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'><circle cx='4' cy='4' r='4' fill='red'/></svg>");