Unexpected duplication of :after pseudo element assigned to SVG:text. Working with pseudo elements and SVG

Question

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?

Answer 1

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.