Невпорядкований список як хронологія - 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 використовує

        але я пішов з
          ) де кожен пункт списку (
        • ) має:: перед псевдоелементом, який порожній за змістом, але позначений як 2 пікселі в ширину з червоним кольором фону. Це створює "рядок" перед кожною
        • . Подальший стиль потім позиціонує цей псевдоелемент / рядок.

      Розумне додавання SVG у :afterпсевдоелемент, що заощаджує розмітку, надано компанією Saadat. Початкова версія включала додаткові фонові властивості, щоб містити розмір SVG і запобігати його повторенню, але я не знайшов їх абсолютно необхідними, принаймні в цьому контексті. Однак зверніть увагу, що розмітка SVG правильно використовує focusableатрибут, щоб запобігти його включенню на вкладку клавіатури. Хороших ходів! ?

      Ось результат:

      Дивіться «
      Невпорядкований список ручок» як безперервну вертикальну шкалу від Джеффа Грема (@geoffgraham)
      на CodePen

      Джерело