Unexpected duplication of :after pseudo element assigned to SVG:text. Working with pseudo elements and SVG
css, google-chrome, html, pseudo-element, svg
Solution
Like Duopixel wrote, SVG doesn't support CSS `:before` or `:after` pseudo-elements applied to svg elements. SVG might allow this in the future, but how that should work is still not defined.
Problem
This is a two-part question, see below. While trying to add a % symbol via CSS to an instance of SVG text using the :after pseudo-element I ran into this problem (JsFiddle provided). I am on Chrome Version 24.0.1312.57. HTML: ``` <span class="percentage2">This is 20</span> <p class="percentage2">This is 20</p> <h1 class="percentage2">This is 20</h1> <div class="wrapper"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="20" y="20" style="fill:black;" class="percentage2">This is 20</text> </svg> </div> ``` CSS: ``` .wrapper { width: 300px; height:80px; overflow:hidden; } .percentage2:after { content:"%"; display: inline-block; font-size: 0.7em; position:relative; left:100px; } ``` The unexpected result is that the % symbol appears twice: once at the leftmost edge of the wrapper element and once where it was supposed to be positioned. First question: why is this happening? If I do not specify a display:inline-block the :after content is inserted as inline in the HTML elements, but does not appear in the SVG. CSS: ``` .percentage1:after { content:"%"; font-size:0.7em; } ``` SCREENSHOT: Second question: is there a way to add inline pseudo elements to an SVG text element? What other display modes are supported when applying :after elements to SVG elements?