Неуређена листа као хронологија - ЦСС-трикови

Anonim

Освежавајуће једноставан (а опет лукав) начин за стварање вертикалне хронологије помоћу праве, семантички неуређене листе (

    ) од Петера Цоопера. 
    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; )

    Петер је идеју добио након што је видео да се она спроводи на веб страници ББЦ Невс. Та верзија је ишла са уређеном листом (

      ) елемент који има смисла ако имамо посла са одређеним редоследом догађаја. Петер'с таке користи неуређену листу која може бити подједнако добра.

      Укратко, то је стандардна ХТМЛ листа (ББЦ користи

        али пошао сам са
          ) где свака ставка листе (
        • ) има знак: бефоре псеудо-елемент који је садржај празан, али је означен као широк 2 пиксела црвеном бојом позадине. Ово ствара 'линију' пре сваког
        • . Даљи стил затим поставља овај псеудо-елемент / линију.

      Паметан додатак СВГ-а који штеди маргину у :afterпсеудо-елемент љубазношћу је компаније Саадат. Оригинална верзија је садржала додатна својства позадине да садрже величину СВГ-а и спречавају његово понављање, али нисам сматрао да су потпуно неопходна, барем у овом контексту. Међутим, приметите да СВГ ознака правилно користи focusableатрибут да би спречила његово укључивање на картицу тастатуре. Лепи потези! ?

      Ево резултата:

      Погледајте
      листу неуређених оловки као континуирану вертикалну хронологију Геофф Грахам (@геоффграхам)
      на ЦодеПен.

      Извор