26

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?

Community
  • 1
  • 1
Erik Veland
  • 737
  • 1
  • 7
  • 11

1 Answers1

27

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 */
Erik Veland
  • 737
  • 1
  • 7
  • 11
  • 3
    +1 for an elegant solution. Adding a class instead of struggling to select a semi-existant element is very nice. Thank you. – turzifer Oct 23 '13 at 13:09
  • 15
    But this doesn't address the issue of manipulating the 'before' content with jQuery. – Kokodoko Nov 28 '14 at 14:26