define pseudo class and pseudo element in same element

Question

My question is really simple, just what i am trying to do is :hover, :after and :before , i want hover anf after to embed in same element, check out my css code:-

#sidebar .widget li a:before:hover, #sidebar .widget li a.active:before { 
    background-position: 65% 65.7%;
}

Here the element have an icon in :before which i cnt remove or modify, and also i want to have an hover effect on it...

Any solution for this, my console doesn't show the hovering effect?

Answer 1

Interesting question. If you're able to show us a working example we could probably be of more help.

However, in theory there's nothing wrong with what you're attempting to do (although not all browsers will like it: particularly IE8 and below).

The important thing to understand here is that :hover is a pseudo-class, whereas :before is a pseudo-element.

Here's a quick excerpt from the standard (with thanks to this answer previously on Stack Overflow):

Pseudo-classes are allowed anywhere in selectors while pseudo-elements may only be appended after the last simple selector of the selector.

The mistake you're making is in your syntax: the order that you're appending them.

Try this instead:

#sidebar .widget li a:hover:before,
#sidebar .widget li a.active:before { 
    background-position: 65% 65.7%;
}

That should do as you wish. However this isn't going to give you great cross-browser coverage, it's not something that all browsers support of have implemented.

A better approach would be to:

• reset the :before element to nothing (overwrite the styles you can't access);
• use a non-repeated background image on the anchor instead (to display the image), and padding-left to give the indentation;
• You can then switch the background-image in whatever fashion you see fit using :hover on the anchor in your CSS.

This will give you far better cross-browser compatibility.