Osviežujúco jednoduchý (ale rafinovaný) spôsob, ako vytvoriť vertikálnu časovú os, pomocou priameho, sémantického neusporiadaného zoznamu (
- ) od Petra Coopera.
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 dostal tento nápad po tom, ako ho implementoval na webovú stránku BBC News. Táto verzia bola dodaná so zoradeným zoznamom (
- ) prvok, ktorý dáva zmysel, ak máme do činenia s konkrétnym radom udalostí. Petrov názor používa neusporiadaný zoznam, ktorý môže byť rovnako dobrý.
) má: pred pseudoprvkom, ktorý je prázdny z hľadiska obsahu, ale je označený ako široký 2 pixely s červenou farbou pozadia. Takto sa pred každou vytvorí „čiara“- . Ďalším tvarovaním sa potom umiestni tento pseudoelement / línia.
Stručný príbeh, je to štandardný zoznam HTML (používa BBC
ale išiel som s
) kde je každá položka zoznamu (
Inteligentné pridanie SVG do :afterpseudoprvku, ktoré šetrí značky, je s láskavým dovolením Saadata. Pôvodná verzia obsahovala ďalšie vlastnosti pozadia, ktoré obsahovali veľkosť súboru SVG a zabránili jeho opakovaniu, ale nepovažoval som ich za úplne nevyhnutné, aspoň v tomto kontexte. Všimnite si však, že značka SVG správne používa tento focusableatribút, aby zabránila jeho zahrnutiu na kartu klávesnice. Pekné pohyby! ?
Výsledok:
Pozrite si
zoznam neusporiadaných pier ako nepretržitú vertikálnu časovú os od Geoffa Grahama (@geoffgraham)
na CodePen.
Zdroj