Cacher la première puce d’une liste

Les listes à puces sont par défaut verticales ; mais il arrive que graphiquement on souhaite les présenter horizontalement.
Les puces qui habituellement marquent chaque élément se voient alors affublées d’un rôle plus proche du séparateur.

Cependant, dans un contexte où la largeur des éléments et la largeur de leur conteneur peuvent varier, des retours à la ligne peuvent s’opérer.

Comment dès lors s’assurer que les puces soient uniquement visibles quand elles séparent deux éléments de la même ligne ?

C’est ce que je propose à travers ce bloc de déclarations CSS à appliquer sur des listes non-ordonnées :

{
    display: flex;
    flex-wrap: wrap;

    column-gap: 1.5rem;
    margin-left: -1.5rem;
    padding-left: 1.5rem;

    clip-path: inset(0 0 0 1.5rem);
}

Comme vous le voyez, il s’agit simplement de décaler vers la gauche le positionnement des puces placées en début de lignes, puis de les masquer à l’aide d’un rognage.

Le petit bonus consiste à passer par clip-path, qui évite de devoir ajouter un conteneur si nous y avions préféré overflow: hidden.

---

Vous pouvez jouer avec le CodePen dédié à cet article si vous le souhaitez.