How to change :before on hover state

Question

I have some css I am working with, some links to be exact that have some :before on them for some aditional styling, I want the before to change background color when I hover on the .

Here's my poor attempt at it:

nav > li > a:hover a:before {
background-color: #fff

}

I just want to change the background color of the a:before when i hover over the a.

Thanks!!

You should find this very informative: http://stackoverflow.com/questions/5777210/how-to-write-hover-condition-for-abefore-and-aafter — Mastrianni, Aug 05 '14 at 03:36

score 4 · Accepted Answer · answered Aug 05 '14 at 03:29

4

Try joining them together like this:

nav > li > a:hover:before {
    background-color: #fff;
}

answered Aug 05 '14 at 03:29

joshhunt

5,197
4
37
60

score 1 · Answer 2 · answered Aug 20 '16 at 07:46

1

This may also work for you.

nav > li > a:hover::before { background-color: #fff; }

answered Aug 20 '16 at 07:46

Hari kris

49
13

How to change :before on hover state

2 Answers2