464

I would like to use ::before to place SVG images before some selected elements:

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

Above code just displays the plaintext.
I checked the spec and there seem to be some restrictions on what content can be. CSS content property solution is preferable.

Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
Sunny
  • 9,245
  • 10
  • 49
  • 79
  • 1
    Is something wrong with using it as a background image? – cimmanon Oct 08 '13 at 18:23
  • 2
    I want to use it to generate fancy pointers to JQuery UI tooltips. I do that now with CSS pseudo elements hack but that gives me only triangles. Background image will not work in this case as I need something that goes outside the element. – Sunny Oct 09 '13 at 17:00

11 Answers11

517

Yes you can! Just tested this and it works great, this is awesome!

#test::before {
  content: url(path/to/your.svg);
  width: 200px;
  height: 200px;
}

Or if you prefer to put the SVG directly in the CSS:

#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>

SVG URL encoder to format your own SVGs as shown here.

dezman
  • 18,087
  • 10
  • 53
  • 91
  • 28
    Unless SVGs are special, you should be able to treat them the same as you would an image: `content: url(path/to/my.svg)`. That doesn't necessarily mean it would work with the jQuery UI tooltips library, though. – cimmanon Oct 09 '13 at 17:10
  • 1
    @cimmanon hmm, that's sweet, i want to test that. So in my.html or whatever I could have a bunch of html code to render... sounds awesome. – dezman Oct 09 '13 at 17:20
  • @cimmanon... I will give it a try. I wonder why SVG never made it big. I am returning to programming after a 7 years gap and was surprised to find that SVG is so under-utilized despite browser support now for all SVG basics. Any comments? – Sunny Oct 10 '13 at 09:04
  • @watson. Yes it solves the issue in an indirect manner. It would be nice if there was a way to specify a URL as something like "thisFile->some_div_id or some_svg_id" so the SVG could effectively be embedded in the calling file itself. I will check the "URL" specs in detail if this is possible using some syntax. – Sunny Oct 11 '13 at 08:17
  • 2
    Why would you want to do this? If you have the svg code in the file already, then there is no need to put it in a pseudo-class. The whole point of pseudo-classes is to reduce DOM elements when you want to add a bit of content, but in your case if you just use your svg code normally it will be no worse (and probably cleaner) than putting it in a pseudo-class(which is also probably impossible). Unless of course if you want to put your svg code in a bunch of locations, in which case you should just keep your svg code in a separate file like an image. – dezman Oct 11 '13 at 14:50
  • @Watson Missed your comment earlier. The reason I am using psuedo class is to generate the arrows for tool tips for Form fields. There I am restricted to the CSS triangles. I thought if I could have in-line SVG instead, I could have fancy vector-based, even dynamically generated tooltip pointers shown in many shapes. I thought that at least you deserve the courtesy of an answer. Sorry for the delay. – Sunny Feb 26 '14 at 17:04
  • Considering that SVG can have inline scripts. Is this a possible XSS issue? –  Apr 06 '15 at 14:12
  • 7
    unfortunately, i don't believe this solution works with SVG sprites. for instance, `content: url(mysprite.svg#my-icon)` won't actually pull up your icon. i would love to be proven wrong, however :) – Jason Apr 27 '15 at 18:10
  • 4
    @watson, semantic. The HTML = structure, CSS = presentation. If a SVG is decorative then it shouldn't be in the HTML structure, it should be in CSS. – deathlock Oct 03 '16 at 12:11
  • Okay so this is the best solution so far, but this doesn't work with pseudo-element, unfortunately. :( It just doesn't resize to its intended size: http://jsbin.com/xagobimiti/ – deathlock Oct 03 '16 at 13:53
  • @deathlock You can apply the SVG as a background-image instead https://codepen.io/yayMark/pen/dKaqay – Mark Hewitt Jul 02 '18 at 04:21
  • Just make sure if your SVG is responsive, you have to set display: inline-block; for it to respect the width/height properties. Otherwise it will default to its exported size. – pinksharpii Sep 17 '18 at 14:56
  • 2
    Dezman: There's good reasons to do this, like where you don't have access to modify the HTML structure. For example, some 3rd-party plugin renders a button, and the button needs a custom icon. It's much easier just injecting a pseudo-element and be done with it (and go fry bigger fish), rather than spending X immense amount of time investigating and correctly/safely/efficiently branching and modifying original source code. Depending on the context (1 person project vs big corporate project, private access vs public access, etc), this is good or bad. – Kalnode Jul 23 '19 at 15:59
  • 1
    What about inline SVG code? Or rather, inline HTML. – Kalnode Jul 23 '19 at 15:59
  • 2
    @Jason: sprites with fragment identifiers (`content: url(mysprite.svg#my-icon)`) will work if you define views in the SVG, e.g. ``: https://css-tricks.com/svg-fragment-identifiers-work/ – Peter Mar 06 '20 at 13:48
  • 9
    As mentioned in other replies; Its 2020, So does SVG: ``content:url("data:image/svg+xml,");`` – Danny '365CSI' Engelman Mar 06 '20 at 15:34
  • The best reason I could think of as to why someone would want to do something like this is: To be able to change the style of the arrow SVG on a button on hover, By placing the svg like this and not as a background-image, you can modify the svg fill color & more! – mateostabio Mar 11 '20 at 21:03
  • Addendum to @Peter: ..., but It does not work if you are using `` – Simon Mar 17 '20 at 09:16
  • @Simon Yes it does, it is simple but not straighforward: `...` – Peter Mar 17 '20 at 11:40
  • 1
    I meant that if your SVG containing all your icons itself is made of symbols (e.g. https://css-tricks.com/svg-symbol-good-choice-icons/) and you are trying to xlink:href to one of the symbols inside the icons SVG. – Simon Mar 17 '20 at 13:00
  • @dezman SVG can benefit from the resource optimization if it is in image file format such as defering the image load request, lazy load, also more readable in code, you dont have to copypaste to another html file, just reference to the file (semantic benefit as said by @deathlock) – rickvian Jun 02 '21 at 05:08
  • I have realised that I can use `url()` with data URI for `content`, but I failed to style this SVG. What I wanted was that I can change the size and maybe even the `fill` of it. I tried to remove any `width`, `height` and `fill` attribute in the SVG, but it is not working. That's why I came here, now I'm even more confused – jimmymcheung Mar 10 '23 at 00:46
269

You can use the url() CSS function.

#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 any # symbols. Use an encoder like this one.

Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
Jenny
  • 2,691
  • 1
  • 10
  • 2
  • 28
    Since SVGs often use double quotes, you can also just use outer single quotes. @Jenny's suggestion is a great way of doing it if you don't want to use an external SVG file. – Micros Jun 01 '17 at 08:18
  • 3
    This is great. Unfortunately it only works with Chrome for me (tested on Chrome, Firefox and Edge). – Arsen Aug 16 '17 at 19:54
  • 2
    OK it works on FF. Just needed to pay attention to the "no #" part. Also make sure to use div tag (doesn't seem to work with span). Sadly still no success for Edge. – Arsen Aug 16 '17 at 20:02
  • Like so many brilliant solutions, it's not supported by IE11. `url('file.svg')` works however. – Bob Stein May 18 '18 at 22:51
  • 18
    What I found important is to add `xmlns='http://www.w3.org/2000/svg'` in the part to work in Chrome 66.x. For example - small chevron will be: `content:url("data:image/svg+xml;utf8,");` – darth0s Jun 25 '18 at 09:40
  • 11
    fyi `#` urlencodes to `%23`, and also have to remove all line breaks. – ryanrain Aug 22 '19 at 13:03
  • 14
    Easy way: Use https://yoksel.github.io/url-encoder/ for safe encoding SVG images as URL data (background-image or content property). – Rafiozoo Oct 01 '20 at 12:38
  • @Micros makes a great point. Copying and pasting a SVG from let's say Font Awesome will give you SVG code that is using double quotes. In this case, you want to make sure that your `content: URL (' ');` is single quotes. Also include the following first `(content:URL ('data:image/svg+xml;charset=UTF-8,');` and then paste your SVG code after the comma and before the closing single quote. In the case of Font Awesome code, you may want to add a height, width, and even fill to the SVG. For example `` – designertofullstack Feb 10 '23 at 02:40
243

You can add the SVG as background-image of an empty :after or :before.

Here you go:

.anchor:before {
  display: block;
  content: ' ';
  background-image: url('../images/anchor.svg');
  background-size: 28px 28px;
  height: 28px;
  width: 28px;
}
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
DerZyklop
  • 3,672
  • 2
  • 19
  • 27
  • 13
    I find this one of the best solutions, after looking for a while. You can control every single aspect of the inserted element and works in the normal way CSS style-sheets works, with separated logic. Great – Danielo515 Nov 06 '14 at 15:03
  • ...ahh this got my hopes up, until I realize that `background-size` is not supported in Opera Mini. This is so frustrating. – deathlock Oct 03 '16 at 13:27
  • Worked great. @deathlock, background-size shouldn't be needed as you are defining the dimensions in the svg itself, I didn't need it. – Eric Soyke Jun 14 '18 at 15:21
  • 1
    Should be the accepted answers since the question says "in a pseudo element :before or :after" – ZalemCitizen Oct 24 '18 at 10:02
  • I had to add `` to the beginning of my svg file to make it works. – Nicolas Boisteault Sep 03 '19 at 12:55
  • 8
    @NicolasBoisteault I tried it but what worked for me was actually to use this structure as one of the answers : `url("data:image/svg+xml; utf8, ");` – Max Jul 19 '20 at 23:14
  • @Max Yes, we can find this example here too in CSS part : https://icons.getbootstrap.com/#usage – Nicolas Boisteault Jul 20 '20 at 14:49
  • 1
    I couldn't get Max 's tip to work until I put my in a file, then [base64-encoded](//b64.io) it. Example (adds "External Link" icon after links): `a:after{content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgc3Ryb2tlPSIjMzU2IiBzdHJva2Utd2lkdGg9IjIuMSIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHlsZT0ibGluZS1oZWlnaHQ6MDsgY3Vyc29yOnBvaW50ZXIiPjxwb2x5bGluZSBwb2ludHM9IjE3LDE0IDE3LDIwIDUsMjAgNSw4IDExLDgiPjwvcG9seWxpbmU+PHBhdGggZD0iTTE0LDVMMjAsNSBMMjAsMTFNMjAsNUwxMSwxNCI+PC9wYXRoPjwvc3ZnPg==);}` – ashleedawg Feb 13 '21 at 11:12
  • \* **actually** the above link to the Base64 encoder (b64.io) doesn't currently work for this purpose. However [base64.guru/converter/encode/image/svg](https://base64.guru/converter/encode/image/svg) will do the trick. – ashleedawg Feb 13 '21 at 11:17
47
<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>

Convenient tool for SVG encoding url-encoder

Alexei Zababurin
  • 927
  • 12
  • 15
36

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:

Codepen sample using 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;
}

For IE8, change to this:

  background-image: url(data:image/png;base64,data......);
Asons
  • 84,923
  • 12
  • 110
  • 165
  • 1
    But this isn't scalable, isn't it? I can't resize it to 16px or 320px at will. – deathlock Oct 03 '16 at 11:21
  • @deathlock Of course it scales, though not my sample as it has a fixed size set, 80px wide/high. – Asons Oct 03 '16 at 15:00
  • 1
    @deathlock May I ask if you downvoted because the above sample didn't scale? – Asons Oct 03 '16 at 15:09
  • how would you make it scale? And no, I didn't. – deathlock Oct 06 '16 at 12:28
  • @deathlock Thanks, and here is one way to scale svg: http://jsfiddle.net/ess6ywce/ ... using percent. Also, search SO with `scale svg` and you'll find many more ways – Asons Oct 06 '16 at 16:16
  • I'm sorry - I mean, how would you make it scale as a background-image? Tried searching at SO and all I found refer to inline SVG. The only method I can think of is using `background-size: cover`, but the support is kinda lackluster in Opera Mini... – deathlock Oct 07 '16 at 10:00
  • @deathlock Have you tried using CSS `object-fit`? It works the same way as `background-size: cover` on an `img` ... [Opera Mini support](http://caniuse.com/#feat=object-fit) ... [Resource sample](https://dev.opera.com/articles/css3-object-fit-object-position/) – Asons Oct 08 '16 at 05:47
  • I've just heard of `object-fit`. That's cool! I've been playing with it for a bit, and unfortunately it appears it only works with inline image (and not with background-image)? Would be tad tricky when we have to deal with the separation of content and presentation... – deathlock Oct 08 '16 at 07:28
  • @Ason can you provide an example where it would scale the width/height of :after, not the element it's attached to? – vanowm Dec 03 '20 at 01:21
18

To extend further this topic. In case you want to add Font Awesome 5 icons you need to add some extra CSS.

Icons by default have classes svg-inline--fa and fa-w-*.

There are also modifier classes like fa-lg, fa-rotate-* and other. You need to check svg-with-js.css file and find proper CSS for that.

You need to add your own color to css icon otherwise it will be black by default, for example fill='%23f00' where %23 is encoded #.

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>
Jakub Muda
  • 6,008
  • 10
  • 37
  • 56
6

Be careful all of the other answers have some problem in 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

#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:

#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-size solutions works as well, but is little unhandy, since you have to specify the same sizes twice.

The result in IE11:

IE rendering

zbycz
  • 626
  • 9
  • 12
4

Although this was many years ago, I'd like to also share this.

The answers above are correct, you can directly attach the encoded svg string into the css content property. For those having any issues with the URL it may be due to spaces and characters not valid for such, in that case paste your decoded SVG code into: https://mothereff.in/url

Use the encoded SVG URL and it should work fine. Incorrect & Correct Examples:

#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);
}
Mario Petrovic
  • 7,500
  • 14
  • 42
  • 62
JCrook
  • 411
  • 3
  • 7
  • It works, thanks! However yet i can't modify several svg properties with css. :( So it's width i needed to hardcode as html attribute, like: ` – Viktor Borítás Jan 06 '22 at 19:07
  • Are you applying the css properties via class or id? & also, is the bag within an Object element ? If so apply the changes to the object > svg - Also if your rendering the svg via content method ^ you’ll need to apply it to the svg first as the css won’t effect the content properties as it’s an external link and the paths etc are not rendered within the page as such – JCrook Jan 07 '22 at 20:20
  • 1
    Got it man! Works. So we truly NEED to add each property (attribute) to the svg html itself. No other way with external css.. Here seems to be more details on the reason here: https://stackoverflow.com/a/4505130/9022150 "Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing)." Thanks again. – Viktor Borítás Jan 08 '22 at 09:24
  • So if i choose to have N pieces of svg-s each injected via content methods, then later for e.g. changing the color for all of them, I'd need to copy the svg out, url decode, modify color attr, url encode, paste back to content method.. Haha, probably, thanks no ;) – Viktor Borítás Jan 08 '22 at 09:33
3

using a background mask image with empty content, you can control the color from within css: (Don't forget the position, width and height that you prefer)...!

background-color: red;
-webkit-mask-image: url(icon.svg);
mask-image: url(icon.svg);
content:'';
Simplifying for Human
  • 31
  • 2
1

I just today noticed that a newspaper here used direct injection of the SVG into the ::before and ::after pseudo-elements to render stylized quotes for highlighted content in the article. I tried to find that paper's CMS via whatcms.org but to no avail. I can say however that the owner newspaper - a large national, even international, paper uses a CMS called DM Polopoly.

It seems so much more laborious to enter SVG data into the content element rather than blank the content and use the SVG as a background image. I wonder why they chose this method - what advantage went with this. I've seen some people on Google links who said it made it easy to manipulate the SVG image on hovering upon the pseudo-element . . . But I saw no killer example of this 'benefit'.

This article has a simpler method for inserting the SVG as content. It uses a zoom property to get size adjustment for the image.

Trunk
  • 742
  • 9
  • 24
-1
.myDiv {
  display: flex;
  align-items: center;
}

.myDiv:before {
  display: inline-block;
  content: url(./dog.svg);
  margin-right: 15px;
  width: 10px;
}
Michael Alfandre
  • 1
  • 5
    You should explain a little more your answer. Just from this, it's really hard to tell how or why your answer works. – ifconfig Jul 30 '19 at 18:11