[SOLUCIONADO] Acceder a contenido de pseudo-elemento desde javascript

[Profesor_Falken]

Buenas,

Tengo el siguiente estilo en la pagina. Inserta un texto generado mediante un pseudo elmento definido en CSS:

Código CSS:

#miElemento p:after{
content:'Hello World'
}
 

El elemento se inserta y renderiza correctamente en el navegador

Código HTML:

<div id="miElemento ">
<p>::after</p>
</div>
 

Sin embargo, necesito acceder a su contenido desde Javascript y no lo consigo.

Utilizo jQuery y he intentado esto:

Código consola chrome:

$("#preview").contents().find("#miElemento  p:after").css("content")
-->undefined
 
$("#preview").contents().find("#miElemento p:after").html()
-->undefined
 
$("#preview").contents().find("#miElemento p").css("content")
-->""
 

Alquien sabe como podria recuperarlo?


Muchas gracias y un saludo

[Pantaláimon]

Hola,

No se por qué jQuery no lo permite. Pero vanilla javascript con su función getComputedStyle permite resolver el problema:

Código Javascript:

var $elem = $("#miElemento  p")
var content = getComputedStyle($elem[0], ':after').content
console.log(content)
 

http://jsfiddle.net/hv6cspjg/

Un saludo!

[Profesor_Falken]

Buenas,

Muchisimas gracias. Me ha funcionado perfectamente:

Código Javascript:

getComputedStyle($("#preview").contents().find("#miElemento p")[0], ':after').content
-->'Hello World'
 

Un saludo