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

Here is a 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;
}