Style :before on hover

Question

I have a button:

.button{
 background-color:red;
 color:#fff;
 width:70px;
}
.button:before{
 min-width:0px;
 content: attr(data-number);
}

html:

<div class="button" data-number="5"><a href="javascript:;">button</a></div>

my problem is, I want the content number to be black when user put mouse hover button text. I try:

.button:hover .button:before{
 color:#000;
}

but it is not working.

Vlad DX · Accepted Answer · 2015-10-25T12:21:29.193

4

You need to specify :hover and :before at the same time as:

.button:hover:before {
    color:#000;
}

Such CSS selector as .button:hover .button:before points to .button inside .button. But it's not your case.

edited Oct 25 '15 at 12:21

answered Oct 25 '15 at 12:19

Vlad DX

Florin Pop · Answer 2 · 2015-10-25T12:21:16.943

2

Try:

.button:hover::before{
    color:#000;
}

You need to select both :hover and ::before

edited Oct 25 '15 at 12:21

answered Oct 25 '15 at 12:16

Florin Pop

Yeah, I want the white text (letter 5) to become black! thank you! – RGS Oct 25 '15 at 12:19
Ok, I've changed my answer then to be specific to that. – Florin Pop Oct 25 '15 at 12:20

2 Answers2