Ett uppfriskande enkelt (men ändå snyggt) sätt att skapa en vertikal tidslinje med hjälp av en rak, semantisk oordnad lista (
- ) från 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 fick idén efter att ha sett den implementerad på BBC News webbplats. Den versionen följde med en beställd lista (
- ) -element som är vettigt om vi har att göra med en specifik ordning av händelser. Peters tagning använder en oordnad lista som kan vara lika bra.
) har ett: före pseudo-element som är tomt innehållsmässigt men är markerat som 2 pixlar brett med en röd bakgrundsfärg. Detta skapar "linjen" före varje- . Ytterligare styling placerar sedan detta pseudo-element / linje.
Lång historia kort, det är en standard HTML-lista (BBC använder
men jag gick med
) där varje listobjekt (
Det smarta, markeringsbesparande tillägget av SVG i :afterpseudo-elementet är med tillstånd av Saadat. Den ursprungliga versionen innehöll ytterligare bakgrundsegenskaper för att innehålla storleken på SVG och förhindra att den upprepas, men jag tyckte inte att de var helt nödvändiga, åtminstone i detta sammanhang. Observera dock att SVG-markeringen använder focusableattributet korrekt för att förhindra att det ingår på tangentbordets flik. Trevliga drag! ?
Här är resultatet:
Se
Penns ordnade lista som kontinuerlig vertikal tidslinje av Geoff Graham (@geoffgraham)
på CodePen.
Källa