Kombinieren von :after und :hover für dynamisches Listen-Styling

In CSS kann die Kombination von Pseudoelementen wie :after mit Hover-Zuständen die verbessern visuelle Wirkung von Listenelementen. Angenommen, Sie haben eine Liste, in der ausgewählte Elemente mithilfe von :after eine Pfeilform anzeigen. Um einen ähnlichen Effekt für Elemente zu erzielen, über die Sie mit der Maus fahren, führen Sie die folgenden Schritte aus:

Der bereitgestellte CSS-Code definiert eine gestaltete Liste mit einem Standardstil für alle Listenelemente (#alertlist li) und einem modifizierten Stil für ausgewählte Elemente (#alertlist li.selected) und einen Stil für Elemente, über die der Mauszeiger bewegt wird (#alertlist li:hover).

Um :after mit dem :hover-Selektor zu kombinieren, hängen Sie :after an #alertlist li:hover just an wie Sie es mit #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: "";
}

Durch die Kombination des Pseudoelements „:after“ mit den Selektoren „.selected“ und „:hover“ können Sie die Pfeilform mühelos sowohl auf ausgewählte als auch auf schwebende Listenelemente anwenden und so einen dynamischen und ansprechenden visuellen Hinweis erstellen.