CSS在悬停时更改":after"元素的颜色

Question

让我们说我有一个元素列表:

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

当我悬停列表项时,我需要能够获得有关每个主题的更多信息.我用CSS :after伪元素做了这个.

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

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

这是一个jSfiddle

现在,当我将鼠标悬停在More info文本上时,我想改变它的颜色.我真的不明白如何实现这种效果.我已经尝试了以下css规则,但它没有按预期工作.

li:after:hover {
    color: red;
}

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

在CSS中可以做到吗？

如果是,另一个问题很有趣,我可以将一个onclick事件附加到该:after元素吗？

Answer 1

这很完美

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

Answer 2

根据ExtPro的评论,你不能

但你可以这样做......

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;
}

使用:活动为onClick？

li > span:active {
    color:blue;
}

演示: http ://jsfiddle.net/79Lvn/2/

还是JS/jQuery方式？只是...

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

演示: http ://jsfiddle.net/79Lvn/4/