Nesakārtots saraksts kā laika skala CSS-triki

Anonim

Atsvaidzinoši vienkāršs (tomēr veikls) veids, kā izveidot vertikālu laika skalu, izmantojot taisnu, semantisku nesakārtotu sarakstu (

    ) no Pītera Kūpera. 
    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; )

    Pēteris ideju ieguva, redzot, kā tā tiek īstenota BBC News vietnē. Šī versija tika pievienota ar sakārtotu sarakstu (

      ) elements, kas ir jēga, ja mums ir darīšana ar noteiktu notikumu secību. Pētera lietotne izmanto nesakārtotu sarakstu, kas var būt tikpat labi.

      Ilgs stāsts, tas ir standarta HTML saraksts (BBC izmanto

        bet es gāju ar
          ), kur katrs saraksta vienums (
        • ) ir: pirms pseidoelementa, kas saturiski ir tukšs, bet ir atzīmēts kā 2 pikseļu plats ar sarkanu fona krāsu. Tādējādi pirms katra tiek izveidota “līnija”
        • . Tālāk stils pozicionē šo pseidoelementu / līniju.

      Gudrs, uzcenojumu taupošs SVG pievienošana :afterpseidoelementam ir Saadat pieklājība. Sākotnējā versijā bija iekļautas papildu fona īpašības, lai saturētu SVG lielumu un novērstu tā atkārtošanos, taču es neuzskatīju, ka tie vismaz šajā kontekstā ir pilnīgi nepieciešami. Tomēr ievērojiet, ka SVG marķējums pareizi izmanto focusableatribūtu, lai novērstu tā iekļaušanu tastatūras cilnē. Jauki gājieni! ?

      Lūk, rezultāts:

      Skatiet
      Geoff Graham (@geoffgraham)
      CodePen pildspalvu nesakārtoto sarakstu kā nepārtrauktu vertikālu laika skalu.

      Avots