En forfriskende enkel (men smart) måde at oprette en lodret tidslinje ved hjælp af en lige, semantisk ikke-ordnet 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 fik ideen efter at have set den implementeret på BBC News-webstedet. Denne version fulgte med en ordnet liste (
- ) element, der giver mening, hvis vi har at gøre med en bestemt rækkefølge af begivenheder. Peters tag bruger en ikke-ordnet liste, som kan være lige så god.
) har et: før pseudo-element, der er tomt indholdsmæssigt, men er markeret som 2 pixels bredt med en rød baggrundsfarve. Dette skaber 'linjen' før hver- . Yderligere styling placerer derefter dette pseudo-element / linje.
Lang historie kort, det er en standard HTML-liste (BBC bruger
men jeg gik med
) hvor hvert listeelement (
Den smarte, markupbesparende tilføjelse af SVG til :afterpseudo-elementet er takket være Saadat. Den originale version indeholdt yderligere baggrundsegenskaber for at indeholde størrelsen på SVG og forhindre, at den gentages, men jeg fandt dem ikke helt nødvendige, i det mindste i denne sammenhæng. Bemærk dog, at SVG-markeringen korrekt bruger focusableattributten til at forhindre, at den medtages på tastaturfanen. Dejlige træk! ?
Her er resultatet:
Se
pennens uordnede liste som kontinuerlig lodret tidslinje af Geoff Graham (@geoffgraham)
på CodePen.
Kilde