Séparateurs de texte pour les éléments LI

Question

J’aimerais ajouter une barre oblique ('/') entre mes éléments li, mais je ne suis pas sûr de la meilleure façon de le faire sémantiquement. En ce moment, j’inclus simplement la barre oblique dans la balise li et j’ajoute un espacement avec des espaces incassables, comme suit:

Qu’en penses-tu? Merci.

Answer 1

Vous pouvez utiliser des pseudo-éléments pour inclure du texte après un élément et vous pouvez utiliser des sélecteurs CSS3 pour supprimer la barre oblique de fin du dernier élément.

ÉDITER:

Le tout peut être fait en une seule ligne avec un meilleur CSS3.

EDIT: EDIT:

C’est encore plus facile que ça.

Answer 2

C’est ma solution pour l’élément LI séparé par | (tuyau) :

Le combinateur d’adjacence (un signe plus, +) est très pratique dans ce cas. Il vous permet de styliser un élément s’il a été directement précédé d’un autre élément spécifié. Étant donné que le premier li n’est pas précédé d’un autre li, il n’aura pas le contenu qui lui est ajouté. C’est beaucoup moins taper que :

Answer 3

Vous pouvez mettre le contenu li dans une plage, puis utiliser CSS:

Ou quelque chose de similaire.

éditer Ah comme Kyle l’a dit, mais l’ajout de la règle last_child est plus complet.

Answer 4

Pour ceux qui utilisent Sass, j’ai écrit un mixin à cet effet:

Exemple:

Ce qui vous donnera ceci: