動的リスト スタイリングのための :after と :hover の組み合わせ

CSS では、:after のような疑似要素とホバー状態を組み合わせると、リスト項目の視覚的な影響。 :after を使用して、選択した項目に矢印の形が表示されるリストがあるとします。マウスオーバーされている項目に対して同様の効果を実現するには、次の手順に従います。

提供された CSS コードは、すべてのリスト項目のデフォルト スタイル (#alertlist li)、選択した項目の変更されたスタイルを使用して、スタイル付きリストを定義します。 (#alertlist li.selected)、およびホバーされている項目のスタイル (#alertlist li:hover)。

:after と :hover セレクターを組み合わせるには、:after を #alertlist li:hover just に追加します#alertlist li.selected:

#alertlist li.selected:after, #alertlist li:hover:after {
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}

:after 疑似要素を .selected セレクターと :hover セレクターの両方と組み合わせることで、選択されたリスト項目とホバーされたリスト項目の両方に矢印の形状を簡単に適用でき、動的で魅力的な視覚的な手がかりを作成できます。