Ungeordnete Liste als Zeitleiste - CSS-Tricks

Anonim

Eine erfrischend einfache (und dennoch clevere) Möglichkeit, eine vertikale Zeitachse mithilfe einer geradlinigen, semantischen, ungeordneten Liste zu erstellen (

    ) von Peter Cooper. 
    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 kam auf die Idee, nachdem er sie auf der BBC News-Website umgesetzt hatte. Diese Version ging mit einer geordneten Liste (

      ) Element, das Sinn macht, wenn es sich um eine bestimmte Reihenfolge von Ereignissen handelt. Peters Einstellung verwendet eine ungeordnete Liste, die genauso gut sein kann.

      Kurz gesagt, es ist eine Standard-HTML-Liste (die BBC verwendet

        aber ich ging mit
          ) wo jedes Listenelement (
        • ) hat ein: vor Pseudoelement, das inhaltlich leer ist, aber als 2 Pixel breit mit einer roten Hintergrundfarbe markiert ist. Dadurch wird vor jedem die 'Linie' erstellt
        • . Weiteres Styling positioniert dann dieses Pseudoelement / diese Linie.

      Die intelligente, markupsparende Hinzufügung von SVG zum :afterPseudoelement wurde von Saadat zur Verfügung gestellt. Die ursprüngliche Version enthielt zusätzliche Hintergrundeigenschaften, um die Größe der SVG zu enthalten und deren Wiederholung zu verhindern, aber ich fand sie zumindest in diesem Zusammenhang nicht unbedingt erforderlich. Beachten Sie jedoch, dass das SVG-Markup das focusableAttribut ordnungsgemäß verwendet , um zu verhindern, dass es auf der Registerkarte "Tastatur" angezeigt wird. Nette Bewegungen! ?

      Hier ist das Ergebnis:

      Siehe die
      Liste der ungeordneten
      Stifte als kontinuierliche vertikale Zeitleiste von Geoff Graham (@geoffgraham) auf CodePen.

      Quelle