CSS Change color of “:after” element on hover

Question

Lets say i have a list of elements :

    
First
    
Second
    
Third



        

Answer 1

this works perfectly

.topButton:hover:after{
    background-color: #000;
}

Answer 2

Her you go mate, did a bit of "fiddling" and got it working with CSS using

.third:hover .sub{
      display:inline;   
}

:

http://jsfiddle.net/79Lvn/3/

Answer 3

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/