Search code examples
javascriptjquerycsspseudo-class

:after selector not working if jquery inserts .active in link

I'm creating a menu and once the navigation is clicked I have different image background for each stage. I'm using :after so I can position it absolute and place it where I want and behind the text. This is also as I'm using already :before for another purpose. It was working before but I was making my CSS shorter and more effictive, everything was fine except that when the link is clicked the following css selector would not work:

.sub-nav a:active:after, .sub-nav a.active:after

Once clicked and :active status is activated the image appears. Once this sector is open the jquery adds the .active class, but the problem is that the :after does not load.

I'm getting crazy and maybe somebody could see the error I'm doing...

Hereby you have a fiddle of my actual code: http://jsfiddle.net/tGXWG/2/

What the :after code is inserteing is the background image like this..

:hover:

enter image description here

:active + .active:

enter image description here

Solution

  • Alright, so after looking at your site, the only thing you seem to be missing is to add opacity: 0.9; to .sub-nav a:hover:after, .sub-nav a:active:after, .sub-nav a.active:after

    .sub-nav a:hover:after, .sub-nav a:active:after, .sub-nav a.active:after {
    position: absolute;
    left: 6px;
    bottom: 2px;
    z-index: -1;
    opacity: 0.9;
}