O modalitate răcoritoare de simplă (dar șmecheră) de a crea o cronologie verticală utilizând o listă directă, semantică neordonată (
- ) de la 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 primit ideea după ce a văzut-o implementată pe site-ul BBC News. Această versiune a fost însoțită de o listă ordonată (
- ) element care are sens dacă avem de-a face cu o ordine specifică a evenimentelor. Luarea lui Peter folosește o listă neordonată care poate fi la fel de bună.
) are a: before pseudo-element care este gol din punct de vedere al conținutului, dar este marcat ca având o lățime de 2 pixeli cu o culoare de fundal roșie. Aceasta creează „linia” înainte de fiecare- . Un stil suplimentar poziționează apoi acest pseudo-element / linie.
Pe scurt, este o listă HTML standard (BBC folosește
dar am mers cu
) unde fiecare element din listă (
Adăugarea inteligentă, care economisește marcaje, a SVG în :afterpseudo-element este datorită lui Saadat. Versiunea originală a inclus proprietăți de fundal suplimentare pentru a conține dimensiunea SVG și pentru a preveni repetarea acesteia, dar nu le-am găsit complet necesare, cel puțin în acest context. Cu toate acestea, observați că marcajul SVG utilizează corect focusableatributul pentru a împiedica includerea acestuia în fila tastaturii. Mișcări frumoase! ?
Iată rezultatul:
Consultați lista
neordonată stilou ca cronologie verticală continuă de Geoff Graham (@geoffgraham)
pe CodePen.
Sursă