Neuspořádaný seznam jako časová osa Triky CSS

Anonim

Osvěžující jednoduchý (a přitom chytrý) způsob, jak vytvořit vertikální časovou osu pomocí přímého, sémantického neuspořádaného seznamu (

    ) od Petera 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 nápad poté, co viděl, jak je implementován na webu BBC News. Tato verze šla s objednaným seznamem (

      ) prvek, který dává smysl, pokud se jedná o konkrétní pořadí událostí. Peterův výběr používá neuspořádaný seznam, který může být stejně dobrý.

      Dlouhý příběh, je to standardní seznam HTML (používá BBC

        ale šel jsem s
          ) kde je každá položka seznamu (
        • ) má: před pseudoprvkem, který je prázdný z hlediska obsahu, ale je označen jako široký 2 pixely s červenou barvou pozadí. Tím vytvoříte před každou linii
        • . Další styling pak umístí tento pseudoelement / řádek.

      Chytré přidání značek SVG do :afterpseudoelementu, které šetří značky, je s laskavým svolením Saadat. Původní verze obsahovala další vlastnosti pozadí, aby obsahovala velikost SVG a zabránila jeho opakování, ale nenašel jsem je naprosto nezbytné, alespoň v tomto kontextu. Všimněte si však, že značka SVG správně používá focusableatribut, aby zabránila jeho zahrnutí na kartu klávesnice. Hezké pohyby! ?

      Výsledek:

      Podívejte se na
      neuspořádaný seznam pera jako souvislou vertikální časovou osu od Geoffa Grahama (@geoffgraham)
      na CodePen.

      Zdroj