CSS 有没有办法在伪元素中使用 SVG 作为内容 :before 或 :after
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19255296/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to use SVG as content in a pseudo element :before or :after
提问by Sunny
I want to place some SVG images before some selected elements. I am using JQuery but that is irrelevant. I would like to have the :before element to be as:
我想在某些选定元素之前放置一些 SVG 图像。我正在使用 JQuery 但这无关紧要。我希望 :before 元素为：
#mydiv:before {
content:"<svg.. code here</svg>";
display:block;
width:22px;
height:10px;
margin:10px 5px 0 10px;
}
If I do it as shown above, it just display the string. I checked the specs and there seems to be some restrictions on what content can be. Is there a work around to this restriction? Only the content css is relevant to my question.
如果我如上所示执行此操作，它只会显示字符串。我检查了规格，似乎对可以包含的内容有一些限制。是否有解决此限制的方法？只有内容 css 与我的问题相关。
回答by dezman
Yes you can! Just tested this and it works great, this is awesome! It still doesn't work with html, but it does with svg.
是的你可以！刚刚测试了这个，效果很好，这太棒了！它仍然不适用于 html，但它适用于 svg。
In my index.html I have:
在我的 index.html 我有：
<div id="test" style="content: url(test.svg); width: 200px; height: 200px;"></div>
And my test.svg looks like this:
我的 test.svg 看起来像这样：
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3"/>
</svg>
回答by DerZyklop
Yes. You can add the SVG as background-image of an empty :after or :before. Here you go:
是的。您可以将 SVG 添加为空的 :after 或 :before 的背景图像。干得好：
.anchor:before {
display: block;
content: ' ';
background-image: url('../images/anchor.svg');
background-size: 28px 28px;
height: 28px;
width: 28px;
}
回答by Jenny
#mydiv:before {
content: url("data:image/svg+xml; utf8, <svg.. code here</svg>");
display:block;
width:22px;
height:10px;
margin:10px 5px 0 10px;
}
make sure your svg doesn't contain double quotes, and uriencode any # symbols.
确保您的 svg 不包含双引号，并对任何 # 符号进行 uriencode。
回答by Ason
Making use of CSS sprites and data uri gives extra interesting benefits like fast loading and less requests AND we get IE8 support by using image/base64:
使用 CSS sprites 和 data uri 提供了额外有趣的好处，例如快速加载和更少的请求，并且我们通过使用 image/base64 获得了 IE8 支持：
HTML
HTML
<div class="div1"></div>
<div class="div2"></div>
CSS
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;
}
For IE8, change to this:
对于 IE8，更改为：
background-image: url(data:image/png;base64,data......);
回答by Alexei Zababurin
<div class="author_">Lord Byron</div>
.author_ { font-family: 'Playfair Display', serif; font-size: 1.25em; font-weight: 700;letter-spacing: 0.25em; font-style: italic;
position:relative;
margin-top: -0.5em;
color: black;
z-index:1;
overflow:hidden;
text-align:center;
}
.author_:after{
left:20px;
margin:0 -100% 0 0;
display: inline-block;
height: 10px;
content: url(data:image/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 {
right:20px;
margin:0 0 0 -100%;
display: inline-block;
height: 10px;
content: url(data:image/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);
} <div class="author_">Lord Byron</div>回答by Jakub Muda
To extend further this topic. In case you want to add Font Awesome 5icons you need to add some extra CSS.
进一步扩展这个话题。如果您想添加Font Awesome 5图标，您需要添加一些额外的 CSS。
Icons by default have classes svg-inline--faand fa-w-*.
默认情况下，图标具有类svg-inline--fa和fa-w-*.
There are also modifier classes like fa-lg, fa-rotate-*and other. You need to check svg-with-js.cssfile and find proper CSS for that.
还有像fa-lg,fa-rotate-*和其他这样的修饰符类。您需要检查svg-with-js.css文件并为此找到合适的 CSS。
You need to add your own color to css icon otherwise it will be black by default, for example fill='%23f00'where %23is encoded #.
您需要将自己的颜色添加到 css 图标，否则默认情况下它将是黑色的，例如fill='%23f00'where %23is encrypted #。
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>回答by zbycz
Be careful all of the other answers have some problem in IE.
小心所有其他答案在 IE 中都有一些问题。
Lets have this situation - button with prepended icon. All browsers handles this correctly, but IE takes the width of the element and scales the before content to fit it. JSFiddle
让我们来看看这种情况 - 带有前置图标的按钮。所有浏览器都能正确处理这个问题，但 IE 获取元素的宽度并缩放之前的内容以适应它。 JSFiddle
#mydiv1 { width: 200px; height: 30px; background: green; }
#mydiv1:before {
content: url("data:url or /standard/url.svg");
}
Solution is to set size to before element and leave it where it is:
解决方案是将 size 设置为元素之前并将其保留在原处：
#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
}
The background-image+ background-sizesolutions works as well, but is little unhandy, since you have to specify the same sizes twice.
在background-image+background-size解决方案可以作为很好，但有点不方便，因为你必须指定两次相同的尺寸。
The result in IE11:
在 IE11 中的结果：
回答by Michael Alfandre
.myDiv {
display: flex;
align-items: center;
}
.myDiv:before {
display: inline-block;
content: url(./dog.svg);
margin-right: 15px;
width: 10px;
}
