Un modo piacevolmente semplice (ma astuto) per creare una linea temporale verticale utilizzando un elenco non ordinato semantico diretto (
- ) di 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 ha avuto l'idea dopo averla vista implementata sul sito web della BBC News. Quella versione era accompagnata da un elenco ordinato (
- ) elemento che ha senso se abbiamo a che fare con un ordine specifico di eventi. Il punto di vista di Peter utilizza un elenco non ordinato che potrebbe essere altrettanto buono.
) ha uno pseudo-elemento: before che è vuoto dal punto di vista del contenuto ma è contrassegnato come largo 2 pixel con un colore di sfondo rosso. Questo crea la "linea" prima di ciascuno- . Ulteriori stili posizionano quindi questo pseudo-elemento / linea.
Per farla breve, è un elenco HTML standard (la BBC usa
ma sono andato con
) dove ogni elemento dell'elenco (
L'intelligente aggiunta di SVG nello :afterpseudo-elemento che fa risparmiare markup è cortesia di Saadat. La versione originale includeva proprietà di sfondo aggiuntive per contenere la dimensione dell'SVG e impedirne la ripetizione, ma non le ho trovate del tutto necessarie, almeno in questo contesto. Tuttavia, si noti che il markup SVG utilizza correttamente l' focusableattributo per impedire che venga incluso nella scheda della tastiera. Belle mosse! ?
Ecco il risultato:
Vedere l'
elenco delle penne non ordinate come sequenza temporale verticale continua di Geoff Graham (@geoffgraham)
su CodePen.
fonte