Duplicación inesperada de: después del pseudo elemento asignado a SVG: texto. Trabajando con pseudo elementos y SVG

Esta es una pregunta de dos partes, ver a continuación.

Al intentar agregar un símbolo% a través de CSS a una instancia de texto SVG usando el pseudo-elemento siguiente, encontré este problema (se proporciona JsFiddle ). Estoy en la versión de Chrome 24.0.1312.57.

HTML:

This is 20 

This is 20

This is 20

This is 20

CSS:

 .wrapper { width: 300px; height:80px; overflow:hidden; } .percentage2:after { content:"%"; display: inline-block; font-size: 0.7em; position:relative; left:100px; } 

El resultado inesperado es que el símbolo% aparece dos veces: una vez en el borde más a la izquierda del elemento contenedor y una vez donde se suponía que debía colocarse.

enter image description here

Primera pregunta : ¿por qué está sucediendo esto?

Si no especifico una pantalla: bloque en línea: después de que el contenido se inserta como en línea en los elementos HTML, pero no aparece en el SVG.

CSS:

 .percentage1:after { content:"%"; font-size:0.7em; } 

CAPTURA DE PANTALLA:

enter image description here

Segunda pregunta : ¿hay alguna forma de agregar pseudoelementos en línea a un elemento de texto SVG? ¿Qué otros modos de visualización son compatibles al aplicar: después de los elementos a los elementos SVG?

Al igual que Duopixel escribió, SVG no admite CSS :before o :after pseudo-elementos aplicados a los elementos svg. SVG podría permitir esto en el futuro, pero cómo eso debería funcionar todavía no está definido.