Objetivo: before y: after pseudo-elementos con jQuery

Question

Duplicar posibles:
Manipulating CSS pseudo-elements using JQuery

En pageload Quiero que el: before y: after elementos en una clase a aparecer. Establecí el .lifted: before y .lifted: after para que sea opacity: 0 en el css. Dentro del documento listo tengo:

$(".lifted:before").css("opacity", "1"); 
$(".lifted:after").css("opacity", "1"); 

Esto no funciona. Y el .after jQuery manipulator solo está hecho para insertar contenido por lo que yo sé.

¿Hay alguna manera de manipular el CSS de estos pseudo-elementos usando jQuery?

Answer 1

Decidió ir con la solución de agregar una clase en carga al elemento y luego manipularlo en el CSS.

$(".lifted").addClass("on"); 

CSS

.lifted.on:before, 
.lifted.on:after { 
       opacity: 1; 
    -webkit-transition: opacity 1200ms cubic-bezier(0.25, 0.1, 0.25, 1); 
     -o-transition: opacity 1200ms cubic-bezier(0.25, 0.1, 0.25, 1); 
      transition: opacity 1200ms cubic-bezier(0.25, 0.1, 0.25, 1); 
     -moz-transition: none /* Removed until FF4 hang bug is fixed */