En forfriskende enkel (men likevel smart) måte å lage en vertikal tidslinje ved hjelp av en rett opp, semantisk uordnet liste (
- ) fra 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 fikk ideen etter å ha sett den implementert på BBC News-nettstedet. Den versjonen fulgte med en bestilt liste (
- ) element som er fornuftig hvis vi har å gjøre med en bestemt rekkefølge av hendelser. Peters ta bruker en uordnet liste som kan være like bra.
) har et: før pseudo-element som er tomt innholdsmessig, men er merket som to piksler bredt med rød bakgrunnsfarge. Dette skaper 'linjen' før hver- . Videre styling posisjonerer deretter dette pseudo-elementet / linjen.
Lang historie kort, det er en standard HTML-liste (BBC bruker
men jeg gikk med
) der hvert listeelement (
Det smarte, markeringsbesparende tillegget av SVG i :afterpseudo-elementet er høflighet fra Saadat. Den opprinnelige versjonen inkluderte flere bakgrunnsegenskaper for å inneholde størrelsen på SVG og forhindre at den gjentatt seg, men jeg fant dem ikke helt nødvendige, i det minste i denne sammenhengen. Legg imidlertid merke til at SVG-markeringen bruker focusableattributtet riktig for å forhindre at det blir inkludert i tastaturfanen. Fine grep! ?
Her er resultatet:
Se pennens
uordnede liste som kontinuerlig vertikal tidslinje av Geoff Graham (@geoffgraham)
på CodePen.
Kilde