Is there a way to use SVG as content in a pseudo element before or after

Question

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   mydiv before     content    lt svg   code here lt  svg gt      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

User · Answer

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

User · Answer

myDiv     display  flex    align-items  center      myDiv before     display  inline-block    content  url   dog svg     margin-right  15px    width  10px

User · Answer

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   In my index html I have     lt div id  test  style  content  url test svg   width  200px  height  200px   gt  lt  div gt    And my test svg looks like this    lt svg xmlns  http   www w3 org 2000 svg  gt      lt circle cx  100  cy  50  r  40  stroke  black  stroke-width  2  fill  red   gt      lt polyline points  20 20 40 25 60 40 80 120 120 140 200 180  style  fill none stroke black stroke-width 3   gt   lt  svg gt

User · Answer

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   lt div class  div1  gt  lt  div gt   lt div class  div2  gt  lt  div gt    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

User · Answer

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      x000D   x000D  h1  before  x000D   x000D       svg-inline--fa    x000D    display inline-block  x000D    font-size inherit  x000D    height 1em  x000D    overflow visible  x000D    vertical-align - 125em  x000D     x000D       fa-w-14    x000D    width  875em  x000D     x000D       Icon    x000D    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    x000D     x000D       Margin    x000D    margin-right  75rem  x000D    x000D   lt h1 gt Lorem Ipsum lt  h1 gt  x000D   x000D   x000D

User · Answer

lt div class  author   gt Lord Byron lt  div gt     x000D   x000D   author     font-family   Playfair Display   serif  font-size  1 25em  font-weight  700 letter-spacing  0 25em  font-style  italic  x000D    position relative  x000D    margin-top  -0 5em  x000D    color  black  x000D    z-index 1  x000D    overflow hidden  x000D    text-align center  x000D    x000D    x000D   x000D   x000D   author  after  x000D     left 20px  x000D    margin 0 -100  0 0  x000D    display  inline-block  x000D    height  10px  x000D    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   x000D    x000D   author  before   x000D    right 20px  x000D    margin 0 0 0 -100   x000D    display  inline-block  x000D    height  10px  x000D    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   x000D    x000D    lt div class  author   gt Lord Byron lt  div gt  x000D   x000D   x000D    Convenient tool for SVG encoding url-encoder

User · Answer

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

User · Answer

mydiv before       content  url  data image svg xml  utf8   lt svg   code here lt  svg gt         display block      width 22px      height 10px      margin 10px 5px 0 10px      make sure your svg doesn t contain double quotes  and uriencode any   symbols

[css] Is there a way to use SVG as content in a pseudo element :before or :after

Examples related to css

Examples related to svg