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 */
来源：https://stackoverflow.com/questions/5814810/target-before-and-after-pseudo-elements-with-jquery