Is there a way to use SVG as content in a pseudo element ::before or ::after
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.
SVG URL encoder to format your own SVGs as shown here.
#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:none;stroke:black;stroke-width:3'/%3E%3C/svg%3E ");
width: 200px;
height: 200px;
}
<div id="test"></div>
CSS :before on inline SVG
No, inline SVG is treated as an image, and images are replaced elements which are not allowed to have generated content.
Strictly speaking, I think it's undefined. CSS 2.1 just talks about "images, embedded documents and applets" in general and The HTML standard defines it for images, but not SVG explicitly.
Use SVG image inline inside CSS :before pseudo-element
Try this:
div::before {
content: '';
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%22auto%22%20height%3D%2210%22%20viewBox%3D%220%200%2080%2020%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200h20L10%2020z%22%20fill%3D%22%23ff0%22/%3E%3Cpath%20d%3D%22M30%2020h20L40%200z%22/%3E%3Cpath%20d%3D%22M60%200h20L70%2020z%22%20fill%3D%22%23ff0%22/%3E%3C/svg%3E');
}
I use http://www.grumpicon.com/ this website to convert SVGs for CSS background
How can I add a svg as content on :before pseudo element of an element?
Seems like the SVG
tag needed more attributes.
#square{ background-color: green; width: 100px; height: 100px;}
#square:before{ display: block; content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' /></svg>"); background-size: 28px 28px; height: 28px; width: 28px;}
<div id="square"></div>
Inline SVG in CSS
Yes, it is possible. Try this:
body { background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
}
- http://jsfiddle.net/6WAtQ/
(Note that the SVG content needs to be url-escaped for this to work, e.g. #
gets replaced with %23
.)
This works in IE 9 (which supports SVG). Data-URLs work in older versions of IE too (with limitations), but they don’t natively support SVG.
Before pseudo element not showing up on path element
As I've commented you can't have a before pseudo element for a path. However in your case you can have a symbol for the pin and use it at the end of your document. This way it will stay above all the other paths. (a z-index won't work either in SVG).
If you are using a symbol
with a viewBox
attribute you can give the <use>
element a position (x
and y
attributes) and a size (width
and height
attributes)
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" style="stroke-linejoin: round; stroke:#000; fill: none;" viewBox="1280 320 100 100" id="svg2" >
<defs id="defs4">
<style type="text/css" id="style6">path { fill-rule: evenodd; }</style>
</defs>
<symbol id="map-pin-after" viewBox="0 0 30 30">
<circle cx="15" cy="8" r="8" /> <polygon points="15,30 22.7,10 7.3,10 15,30"/>
</symbol>
<g id="countries">
<path id="AF" data-name="Afghanistan" data-id="AF" class="map-pin active" d="m 1369.9,333.8 -5.4,0 -3.8,-0.5 -2.5,2.9 -2.1,0.7 -1.5,1.3 -2.6,-2.1 -1,-5.4 -1.6,-0.3 0,-2 -3.2,-1.5 -1.7,2.3 0.2,2.6 -0.6,0.9 -3.2,-0.1 -0.9,3 -2.1,-1.3 -3.3,2.1 -1.8,-0.8 -4.3,-1.4 -2.9,0 -1.6,-0.2 -2.9,-1.7 -0.3,2.3 -4.1,1.2 0.1,5.2 -2.5,2 -4,0.9 -0.4,3 -3.9,0.8 -5.9,-2.4 -0.5,8 -0.5,4.7 2.5,0.9 -1.6,3.5 2.7,5.1 1.1,4 4.3,1.1 1.1,4 -3.9,5.8 9.6,3.2 5.3,-0.9 3.3,0.8 0.9,-1.4 3.8,0.5 6.6,-2.6 -0.8,-5.4 2.3,-3.6 4,0 0.2,-1.7 4,-0.9 2.1,0.6 1.7,-1.8 -1.1,-3.8 1.5,-3.8 3,-1.6 -3,-4.2 5.1,0.2 0.9,-2.3 -0.8,-2.5 2,-2.7 -1.4,-3.2 -1.9,-2.8 2.4,-2.8 5.3,-1.3 5.8,-0.8 2.4,-1.2 2.8,-0.7 -1.4,-1.9 z" fill="#f2f2f2"></path>
</g>
<use xlink:href="#map-pin-after" stroke="none" fill="red" width="30" height="30" x="1310" y="327"/>
</svg>
Does the :before pseudo-class affect tspan in SVG?
It's possible to add the SVG as a background to the psuedo class, avoiding any clashing with SVG as per this post:
Is there a way to use SVG as content in a pseudo element :before or :after
So instead of trying to apply the FontAwesome class as a selector on the element, you can set the i
element to wherever you need it, and compensate for the background SVG that is loaded in.
And to answer your comment - you would need to encode the FA into new classes to make it work the way you're asking, since FontAwesome uses i
by default. It would work like this:
.your-class {
content: "/f121";
}
Related Topics
Reduce Spacing Between Bootstrap Horizontal Form Controls
How Does Flex-Shrink Factor in Padding and Border-Box
How to Set Opacity in Parent Div and Not Affect in Child Div
Hide Text Node in Element, But Not Children
Areas Covered by Flexbox Which Are Difficult or Impossible to Achieve With Grid
Difference Between Auto-Fill and Auto-Fit
Preventing Scroll Bars from Being Hidden For Macos Trackpad Users in Webkit/Blink
How to Create a Drop Shadow Only on One Side of an Element
Adjust List Style Image Position
Pure CSS Checkbox Image Replacement
Play Multiple CSS Animations At the Same Time
How to Make 3-Corner-Rounded Triangle in Css
Css Change Button Style After Click
Css Files Are Not Loading in Laravel View
Img Src Svg Changing the Styles With CSS
What Is the Way to Add Horizontal Scroll on Material-Ui Table With Many Columns