On peut ajouter un séparateur vertical (ici rouge et de 2px) qui va dinstinguer les différents éléments d'une liste HTML <li> </li> en utilisant la propriété border-left sur tous les items li de la liste, sauf le premier
li { border-left: 2 px solid red; } li:first-child { border-left: none; }
Une autre méthode consiste à utiliser la propriété "content" qui permet de rajouter du contenu avant (:before) ou après (:after) un élément, mais qui n'est malheureusement pas pris en compte par les vieilles version IE (<8)
li:before { content: " | "; } li:first-child:before { content: normal; content: ""; /* pour Safari */ }
Cette dernière méthode nous permet d'être plus imaginatif en nous donnant la possibilité de rajouter des glyphs (ici une liste intéressante) telles que la bullet
li:before { content: " 2219 "; }
Laisser un commentaire
Participez-vous à la discussion?N'hésitez pas à contribuer!