Target :before and :after pseudo-elements with jQuery [duplicate]

This question already has answers here: Closed 11 years ago.

Possible Duplicate:

Manipulating CSS pseudo-elements using JQuery

On pageload I want the :before and :after elements on a class开发者_开发知识库 to appear. I've set the .lifted:before and .lifted:after to be opacity:0 in the css. Within document ready I have:

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

This doesn't work. And the .after jQuery manipulator is only made for inserting content as far as I can tell.

Is there any way I can manipulate the css of these pseudo-elements using jQuery?

---

Decided to go with the solution of adding a class on load to the element and then manipulating it in the 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 */