Неупорядоченный список как временная шкала - 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 использует

        но я пошел с
          ), где каждый элемент списка (
        • ) имеет псевдоэлемент: before, который пуст по содержанию, но помечен как имеющий ширину 2 пикселя с красным цветом фона. Это создает «линию» перед каждым
        • . Дальнейшая стилизация затем позиционирует этот псевдоэлемент / строку.

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

      Вот результат:

      См.
      Неупорядоченный список перьев как непрерывную вертикальную шкалу времени Джеффа Грэма (@geoffgraham)
      на CodePen.

      Источник