Alexander Alexander - 2 months ago 13
CSS Question

CSS Change color of ":after" element on hover

Lets say i have a list of elements :

<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>


When i hover a list item , i need to be able to get more info about each subject. I did this with CSS
:after
pseudo-element .

ol {
list-style-type: decimal-leading-zero;
}

li:hover:after {
content: " + More info";
}


Here is a jSfiddle

Now when i hover on the
More info
text , i want to change it's color . I don't really get it how to acheive this effect .
i have tried the following css rules , but it does not work as expected .

li:after:hover {
color: red;
}

li:hover:after:hover {
color: red;
}


Is it possible to do in CSS ?

If yes , another question is interesting , can i attach an
onclick
event to the
:after
element ?

Answer

As per ExtPro's comment, you can't

But you can do like...

HTML :

<ol>
    <li>First<span> + More info</span></li>
    <li>Second<span> + More info</span></li>
    <li>Third<span> + More info</span></li>
</ol>

CSS :

li > span {
    display:none;
}

li:hover > span {
    display:inline;
}

li > span:hover {
    color:red;
}

Use :active as onClick ?

li > span:active {
    color:blue;
}

Demo : http://jsfiddle.net/79Lvn/2/


or JS/jQuery way ? just...

$('ol > li').append('<span> + More info</span>');

Demo : http://jsfiddle.net/79Lvn/4/

Comments