Een verfrissend eenvoudige (maar slimme) manier om een verticale tijdlijn te maken met behulp van een rechtlijnige, semantische ongeordende lijst (
- ) van 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 kreeg het idee toen hij het zag geïmplementeerd op de BBC News-website. Die versie ging met een geordende lijst (
- ) element dat zinvol is als we te maken hebben met een specifieke volgorde van gebeurtenissen. Peter's take gebruikt een ongeordende lijst die net zo goed kan zijn.
) heeft een: before pseudo-element dat inhoudelijk leeg is, maar is gemarkeerd als 2 pixels breed met een rode achtergrondkleur. Dit creëert de 'lijn' voor elk- Verdere styling positioneert dan dit pseudo-element / lijn.
Om een lang verhaal kort te maken, het is een standaard HTML-lijst (de BBC gebruikt
maar ik ging mee
) waarbij elk lijstitem (
De slimme, opmaakbesparende toevoeging van SVG aan het :afterpseudo-element is beschikbaar gesteld door Saadat. De originele versie bevatte extra achtergrondeigenschappen om de grootte van de SVG te behouden en herhaling te voorkomen, maar ik vond ze niet helemaal noodzakelijk, althans in deze context. Merk echter op dat de SVG-markup het focusableattribuut correct gebruikt om te voorkomen dat het wordt opgenomen op het toetsenbordtabblad. Mooie bewegingen!
Hier is het resultaat:
Zie de Pen
Unordered List als continue verticale tijdlijn door Geoff Graham (@geoffgraham)
op CodePen.
Bron