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

Question

So I actually ran into some code which uses this selector and I can't really seem to get it.

I've also tried to search on Google but I didn't get a clear answer.

My question is:

Is this selector selecting (sorry for the weird way to say it) a pseudo-element (before) before the a:hover or is it used this way to select the hover state of a:before?

Thanks.

I've made this before the question was closed, Have a look and next time, do some search https://jsfiddle.net/hnp6bvq5/1/ — Ahmed I. Elsayed, Mar 28 '20 at 21:05

James Douglas · Accepted Answer · 2020-03-28T21:07:57.290

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; }

<a>hello</a>

a::before { content: 'boo'; background: red; color: white; }

<a>hello</a>

a:hover::before { content: 'boo'; background: red; color: white; }

<a>hello</a>

Further reading on MDN: ::before :hover

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

1 Answers1