Alexander Alexander - 1 year ago 83
CSS Question

CSS Change color of ":after" element on hover

Lets say i have a list of elements :


When i hover a list item , i need to be able to get more info about each subject. I did this with CSS
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
event to the
element ?

Answer Source

As per ExtPro's comment, you can't

But you can do like...


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


li > span {

li:hover > span {

li > span:hover {

Use :active as onClick ?

li > span:active {

Demo :

or JS/jQuery way ? just...

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

Demo :

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download