Comment pouvez-vous styliser dynamiquement les éléments d'une liste en utilisant :after et :hover en CSS ?

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, suivez ces étapes :

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 juste comme vous le faites avec #alertlist li.selected :

<code class="css">#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: "";
}</code>

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!