¿Existe alguna forma de seleccionar/manipular los pseudo-elementos :before y :after de CSS con jQuery?
Si por ejemplo en mi hoja de estilos tengo esto:
.span:after{ content:'foo'; }
Lo que quiero es cambiar foo por bar utilizando jQuery.
Estás leyendo una traducción autorizada de la pregunta Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after) planteada por JBradwell en StackOverflow.
Respuestas
La mejor solución consiste en hacer uso de un atributo personalizado de tipo data-* y utilizar su valor con jQuery.
Si el código HTML es el siguiente:
<span>foo</span>
Con jQuery podrías añadir un atributo data-content al pasar el ratón por encima:
<script> $('span').hover(function(){ $(this).attr('data-content', 'bar'); }); </script>
Y por último, con CSS puedes acceder al valor de cualquier atributo de HTML mediante la función attr(). Así que tendrías que utilizar el siguiente estilo CSS:
span:after { content: attr(data-content) ' añade cualquier otro contenido que quieras'; }
@librosweb