Combiner :after et :hover pour un style de liste dynamique

En CSS, combiner des pseudo-éléments comme :after avec des états de survol peut améliorer le impact visuel des éléments de la liste. Supposons que vous ayez une liste dans laquelle les éléments sélectionnés affichent une forme de flèche en utilisant :after. Pour obtenir un effet similaire pour les éléments survolés, procédez comme suit :

Le code CSS fourni définit une liste stylisée, avec un style par défaut pour tous les éléments de la liste (#alertlist li), un style modifié pour les éléments sélectionnés. (#alertlist li.selected) et un style pour les éléments survolés (#alertlist li:hover).

Pour combiner :after avec le sélecteur :hover, ajoutez :after à #alertlist li:hover comme vous le faites avec #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: "";
}

En combinant le pseudo-élément :after avec les sélecteurs .selected et :hover, vous pouvez facilement appliquer la forme de la flèche aux éléments de liste sélectionnés et survolés, créant ainsi un repère visuel dynamique et attrayant.