How to Write a ':Hover' Condition For 'A:Before' and 'A:After'

How can I write a ':hover' condition for 'a:before' and 'a:after'?

This depends on what you're actually trying to do.

If you simply wish to apply styles to a :before pseudo-element when the a element matches a pseudo-class, you need to write a:hover:before or a:visited:before instead. Notice the pseudo-element comes after the pseudo-class (and in fact, at the very end of the entire selector). Notice also that they are two different things; calling them both "pseudo-selectors" is going to confuse you once you run into syntax problems such as this one.

If you're writing CSS3, you can denote a pseudo-element with double colons to make this distinction clearer. Hence, a:hover::before and a:visited::before. But if you're developing for legacy browsers such as IE8 and older, then you can get away with using single colons just fine.

This specific order of pseudo-classes and pseudo-elements is stated in the spec:

One pseudo-element may be appended to the last sequence of simple selectors in a selector.

A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

A pseudo-class is a simple selector. A pseudo-element, however, is not, even though it resembles a simple selector.

However, for user-action pseudo-classes such as :hover1, if you need this effect to apply only when the user interacts with the pseudo-element itself but not the a element, then this is not possible other than through some obscure layout-dependent workaround. As implied by the text, standard CSS pseudo-elements cannot currently have pseudo-classes. In that case, you will need to apply :hover to an actual child element instead of a pseudo-element.

1 Of course, this does not apply to link pseudo-classes such as :visited as in the question, since pseudo-elements aren't links.

Combine :after with :hover

Just append :after to your #alertlist li:hover selector the same way you do with your #alertlist li.selected selector:

#alertlist li.selected:after, #alertlist li:hover:after
top: 0;

border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #303030;
content: "";

How can i use hover effect on after element with css?

check out this demo below. I think you are missing content property.

the Red div is created using :after and changes its color on hover.

the selector:after:hover won't work.

.car {  position: relative;  width: 100px;  height: 100px;  background: yellow;}
.car:hover { background: skyblue;}
.car:after { content: ''; width: 50px; height: 50px; position: absolute; right: 0; bottom: 0; background: green;}
.car:hover:after { background: red;}
<div class="car"></div>

a:hover:before - can't seem to understand what it does?

What a:hover::before essentially does, is when you hover on the <a> tag, the following styles are applied to a psuedo element before the <a> tag.

The psuedo-selector ::after does the same, but it puts the content after the tag by default, rather than before.

Consider the following snippets:

a:hover { background: red; color: white; }

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:



In jQuery:



span:after {
content: attr(data-content) ' any other text you may want';

If you want to prevent the 'other text' from showing up, you could combine this with seucolega's solution like this:



In jQuery:



span.change:after {
content: attr(data-content) ' any other text you may want';

How to make a hover effect for pseudo elements?

You can change the pseudo-element based on hover of the parent:


#button:before {
background-color: blue;
content: "";
display: block;
height: 25px;
width: 25px;

#button:hover:before {
background-color: red;

#button {    display: block;    height: 25px;    margin: 0 10px;    padding: 10px;    text-indent: 20px;    width: 12%;}
#button:before { background-color: blue; content: ""; display: block; height: 25px; width: 25px;}
#button:hover:before { background-color: red;}
<div id="button">Button</div>

Unknown pseudo-element or pseudo-class :hover

Double check your validation rules, testing here I get no errors, using CSS 2.1:

If you're testing CSS 1.0 compliance, you'll get your exact error, since :hover wasn't in CSS 1.0, it was added in 2.0.

Only detect click event on pseudo-element

This is not possible; pseudo-elements are not part of the DOM at all so you can't bind any events directly to them, you can only bind to their parent elements.

If you must have a click handler on the red region only, you have to make a child element, like a span, place it right after the opening <p> tag, apply styles to p span instead of p:before, and bind to it.

SASS :after :hover selector

Use &:hover:after {} for targeting the after pseudo-element of the element being hovered over.

&:after:hover {} would select the after pseudo-element and used on hover it.

Related Topics

Leave a reply