Järjestämätön luettelo aikajanana - CSS-temppuja

Anonim

Virkistävän yksinkertainen (mutta ovela) tapa luoda pystysuuntainen aikajana käyttämällä suoraa, semanttista järjestämätöntä luetteloa (

    ) Peter Cooperilta. 
    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 sai idean nähtyään sen toteutuneen BBC News -sivustolla. Tämä versio sisälsi tilatun luettelon (

      ) -elementti, jolla on järkeä, jos kyseessä on tietty tapahtumajärjestys. Peter's take käyttää järjestämätöntä luetteloa, joka voi olla yhtä hyvä.

      Pitkä tarina, se on tavallinen HTML-luettelo (BBC käyttää

        mutta menin mukaan
          ) jossa kukin luettelokohta (
        • ) on: ennen pseudoelementtiä, joka on sisällöltään tyhjä, mutta on merkitty 2 pikselin levyiseksi punaisella taustavärillä. Tämä luo 'viivan' ennen kutakin
        • . Tämän tyyli jatkuu tämän pseudoelementin / viivan sijoittamiseksi.

      :afterSVAT: n älykäs, merkintöjä säästävä lisäys pseudoelementtiin on Saadatin kohteliaisuus. Alkuperäinen versio sisälsi lisätaustaominaisuuksia sisällyttämään SVG: n koon ja estämään sen toistumisen, mutta en pitänyt niitä täysin tarpeellisina, ainakin tässä yhteydessä. Huomaa kuitenkin, että SVG-merkintä käyttää focusablemääritettä oikein estääkseen sen sisällyttämisen näppäimistön välilehteen. Hienoja liikkeitä! ?

      Tässä on tulos:

      Katso
      Geoff Grahamin (@geoffgraham)
      CodePen-sovelluksen Kynän järjestämätön luettelo jatkuvana pystysuorana aikajanana .

      Lähde