Osvežujoče preprost (a vendar zvit) način za ustvarjanje navpične časovnice s pomočjo naravnost semantično neurejenega seznama (
- ) od Petra Cooperja.
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 je idejo dobil, ko jo je videl na spletni strani BBC News. Ta različica je šla z urejenim seznamom (
- ) element, ki je smiseln, če imamo opravka z določenim vrstnim redom dogodkov. Peter's take uporablja neurejen seznam, ki je lahko prav tako dober.
) ima: pred psevdoelementom, ki je vsebinsko prazen, vendar je z rdečo barvo ozadja označen kot 2 slikovni piki. To ustvari "vrstico" pred vsako- . Nadaljnje oblikovanje nato pozicionira ta psevdo-element / črto.
Skratka, to je standardni seznam HTML (BBC uporablja
ampak sem šel z
) kjer je vsak element seznama (
Pameten dodatek SVG v :afterpsevdoelement, ki prihrani markacijo, je dovolil Saadat. Prvotna različica je vključevala dodatne lastnosti ozadja, ki vsebujejo velikost SVG in preprečujejo njegovo ponavljanje, vendar se mi vsaj v tem kontekstu niso zdele povsem potrebne. Vendar upoštevajte, da oznaka SVG pravilno uporablja focusableatribut, da prepreči, da bi bil vključen na zavihek tipkovnice. Lepe poteze! ?
Tu je rezultat:
Oglejte si
seznam neurejenih peresov kot neprekinjeno navpično časovno premico Geoff Graham (@geoffgraham)
na CodePen.
Vir