Une façon rafraîchissante simple (mais astucieuse) de créer une chronologie verticale à l'aide d'une liste non ordonnée sémantique directe (
- ) de Peter Cooper.
ol ( list-style-type: none; ) li ( position: relative; margin: 0; padding-bottom: 1em; padding-left: 20px; ) li:before ( content: ''; background-color: #c00; position: absolute; bottom: 0px; top: 0px; left: 6px; width: 3px; ) li:after ( content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32' focusable='false'%3E%3Ccircle stroke='none' fill='%23c00' cx='16' cy='16' r='10'%3E%3C/circle%3E%3C/svg%3E"); position: absolute; left: 0; top: 2px; height: 12px; width: 12px; )Peter a eu l'idée après l'avoir vue mise en œuvre sur le site Web de BBC News. Cette version allait avec une liste ordonnée (
- ) élément qui a du sens si nous avons affaire à un ordre d'événements spécifique. La prise de Peter utilise une liste non ordonnée qui peut être tout aussi bien.
) a un pseudo-élément: before qui est vide en termes de contenu mais qui est marqué comme ayant une largeur de 2 pixels avec une couleur d'arrière-plan rouge. Cela crée la «ligne» avant chaque- . Un style supplémentaire positionne alors ce pseudo-élément / ligne.
Pour faire court, c'est une liste HTML standard (la BBC utilise
mais je suis allé avec
) où chaque élément de la liste (
L'ajout intelligent et économisant le balisage de SVG dans le :afterpseudo-élément est une gracieuseté de Saadat. La version originale comprenait des propriétés d'arrière-plan supplémentaires pour contenir la taille du SVG et l'empêcher de se répéter, mais je ne les trouvais pas totalement nécessaires, du moins dans ce contexte. Cependant, notez que le balisage SVG utilise correctement l' focusableattribut pour l'empêcher d'être inclus dans l'onglet clavier. Beaux mouvements! ?
Voici le résultat:
Voir la liste Pen
Unordered comme Chronologie verticale continue par Geoff Graham (@geoffgraham)
sur CodePen.
La source