Use an SVG in a pseudo element

Posted on Mar 25, 2025

by Jimmy

CSS

How to use an SVG in pseudo elements like ::before and ::after.

CSS
        
            .element {
    &::after {
        content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.37 16.1"><g data-name="Layer 2"><path style="fill:%23333" d="M23.23 0 12.98 9.77 3.19.12 0 3.36 12.93 16.1 26.37 3.29 23.23 0z" data-name="Layer 1"/></g></svg>');
    }
}        
    

Make sure to add data:image/svg+xml; utf8 before your SVG code and to surround everything with single quotes. Furthermore, if you need to change the colour, replace the # with its encoded counterpart: %23, otherwise, delete all # , so #333 will become %23333, otherwise this will not work.

Here is a good tool to turn SVG files into usable code


Back to Snippets