Неуреден списък като времева линия - CSS-трикове

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; )

    Питър получи идеята, след като я видя реализирана на уебсайта на BBC News. Тази версия върви с подреден списък (

      ) елемент, който има смисъл, ако имаме работа с определен ред от събития. Вземането на Петър използва неподреден списък, който може да е също толкова добър.

      Накратко, това е стандартен HTML списък (BBC използва

        но аз отидох с
          ) където всеки елемент от списъка (
        • ) има a: before псевдоелемент, който е празен по съдържание, но е маркиран като широк 2 пиксела с червен цвят на фона. Това създава „линията“ преди всяка
        • . След това допълнителен стил позиционира този псевдоелемент / линия.

      Интелигентното, спестяващо надбавка добавяне на SVG в :afterпсевдоелемента е предоставено от Saadat. Оригиналната версия включваше допълнителни фонови свойства, за да съдържа размера на SVG и да предотврати повторението му, но не ги намерих за напълно необходими, поне в този контекст. Забележете обаче, че SVG маркировката правилно използва focusableатрибута, за да предотврати включването му в раздела на клавиатурата. Хубави ходове! ?

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

      Вижте
      списъка с неподредени писалки като непрекъсната вертикална времева линия от Geoff Graham (@geoffgraham)
      в CodePen.

      Източник