Järjestamata loend ajaskaalana - CSS-trikid

Anonim

Värskendavalt lihtne (kuid siiski kaval) viis vertikaalse ajaskaala loomiseks sirgjoonelise, semantilise järjestamata loendi abil (

    ) Peter Cooperilt. 
    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 idee pärast seda, kui nägi selle teostamist BBC Newsi veebisaidil. See versioon koos tellitud loendiga (

      ) element, mis on mõttekas, kui tegeleme konkreetse sündmuste järjekorraga. Peter's take kasutab tellimata loendit, mis võib sama hästi olla.

      Pikk lugu, see on tavaline HTML-i loend (BBC kasutab

        aga läksin kaasa
          ) kus iga loendiüksus (
        • ) on: enne pseudoelementi, mis on sisult tühi, kuid on tähistatud kui 2 pikslit lai punase taustavärviga. Nii luuakse enne iga rida
        • . Edasine stiil paigutab seejärel selle pseudoelemendi / joone.

      SVG-i nutikas ja märgistusi säästev lisamine :afterpseudoelemendile on Saadati nõusolek. Algne versioon sisaldas täiendavaid taustaomadusi, et sisaldada SVG suurust ja takistada selle kordumist, kuid ma ei pidanud neid vähemalt selles kontekstis täiesti vajalikuks. Pange tähele, et SVG märgistus kasutab focusableatribuuti õigesti, et takistada selle lisamist klaviatuuri vahekaardile. Toredad käigud! ?

      Siin on tulemus:

      Vaadake
      CodePen'is Geoff Graham'i (@geoffgraham) pliiatsi korrapäratu loendi pideva vertikaalse ajaskaalana
      .

      Allikas