711 Votes

CSS: :hover for :before and :after

Question by WebHorn | Last update on 2022-10-31 | Created on 2014-09-10

Is it somehow possible to define the pseudo class selector :hover for the pseudo elements :before and :after?

Concretely, I would like to design some of my links with CSS rules using a:before and a:after. However, depending on the mouse is moving over the hyperlink or not, another content should appear in front or after the link (so the typical application of :hover).

Interestingly, in my tests, a:before, a:after as well as a:hover are working alone, while the combination  (a:before:hover and a:after:hover) is not working. How is it possible to combine both or is this CSS selector not possible at all?

ReplyPositiveNegativeDateVotes
Avatar NetLabel
4Best Answer18 Votes

When combining :hover and :before (or :hover and :after), it is all about the order - first :hover, then :before and :after.

That's how it works:

a:hover:before
a:hover:after

So, first of all, you have to write the pseudo class selector (:hover) and only after that the pseudo element selector (:before). :before as well as :after should always come at the end.
Last update on 2022-10-31 | Created on 2014-09-10

ReplyPositive Negative
Avatar Guest
810 Votes

...unfortunately it does not work with a class at the beginning:

.class a:hover:after {
  color: #93c21b !important;
}

That has no effect at all.
2022-09-11 at 21:38

Positive Negative
Avatar Guest
1012 Votes

Of course it works with a class:

a.class:hover:after {
  color: #93c21b !important;
}

You have to write everything together without the spaces.
2022-09-12 at 16:32

Positive Negative
Reply
Reply

Related Topics

CSS: Include CSS Stylesheets in HTML

Tutorial | 0 Comments

Website Performance: Deliver JavaScript and CSS files compressed to reduce loading times

Tutorial | 0 Comments

Mouseover buttons using CSS without reloading

Tutorial | 0 Comments

CSS: Hover effect only for filled table cells

Question | 1 Answer

jQuery: CSS Stylesheet Switcher

Tutorial | 1 Comment

Reload Images, CSS, JS and Web Pages despite Browser Cache

Tip | 2 Comments

Darken Background of a Website (Gray Out Effect)

Tutorial | 0 Comments

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own article on askingbox.com. That’s how it’s done.