☰

CSS ホバー時に「:after」要素の色を変更する 質問する

tag-icon • tag-icon html css
CSS ホバー時に「:after」要素の色を変更する 質問する

要素のリストがあるとします:

<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 で行うことは可能ですか?

はい、そうであれば、もう 1 つの興味深い質問は、要素onclickにイベントを添付できるかどうかです。:after

ベストアンサー1

これは完璧に機能します

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

おすすめ記事