Neuređeni popis kao vremenska crta - CSS-trikovi

Anonim

Osvježavajuće jednostavan (a opet lukav) način za stvaranje vertikalne vremenske trake pomoću izravnog, semantički neuređenog popisa (

    ) 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 je ideju dobio nakon što ju je primijenio na web mjestu BBC News. Ta je verzija išla s uređenim popisom (

      ) element koji ima smisla ako imamo posla s određenim redoslijedom događaja. Peter's take koristi neuređeni popis koji može biti jednako dobar.

      Ukratko, to je standardni HTML popis (BBC koristi

        ali pošao sam s
          ) gdje svaka stavka popisa (
        • ) ima znak: before pseudo-element koji je sadržajno prazan, ali je označen kao širok 2 piksela s crvenom bojom pozadine. Ovo stvara 'liniju' prije svake
        • . Daljnji stil zatim postavlja ovaj pseudo-element / liniju.

      Pametni dodatak SVG-a u :afterpseudo-element koji štedi marginu dao je Saadat. Izvorna verzija sadržavala je dodatna svojstva pozadine koja sadrže veličinu SVG-a i sprječavaju njegovo ponavljanje, ali nisam ih smatrala potpuno potrebnima, barem u ovom kontekstu. Međutim, primijetite da SVG oznaka pravilno koristi focusableatribut kako bi spriječila njegovo uključivanje na karticu tipkovnice. Lijepi potezi! ?

      Evo rezultata:

      Pogledajte
      popis neuređenih olovki kao kontinuiranu vertikalnu vremensku traku, Geoff Graham (@geoffgraham)
      na CodePenu.

      Izvor