Lista nieuporządkowana jako oś czasu - CSS-Tricks

Anonim

Odświeżająco prosty (ale sprytny) sposób tworzenia pionowej osi czasu przy użyciu prostej, semantycznej nieuporządkowanej listy (

    ) od Petera Coopera. 
    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 wpadł na ten pomysł po obejrzeniu go na stronie BBC News. Ta wersja poszła z uporządkowaną listą (

      ), który ma sens, jeśli mamy do czynienia z określoną kolejnością zdarzeń. Ujęcie Piotra używa nieuporządkowanej listy, która może być równie dobra.

      Krótko mówiąc, jest to standardowa lista HTML (BBC używa

        ale poszedłem z
          ) gdzie każdy element listy (
        • ) zawiera: przed pseudoelementem, który jest pusty pod względem treści, ale jest oznaczony jako mający 2 piksele szerokości i czerwonym kolorem tła. Tworzy to „linię” przed każdym
        • . Dalsze stylizowanie następnie pozycjonuje ten pseudoelement / linię.

      Sprytny, oszczędzający znaczniki dodatek SVG do :afterpseudoelementu to zasługa Saadata. Oryginalna wersja zawierała dodatkowe właściwości tła, które zawierały rozmiar SVG i zapobiegały jego powtarzaniu, ale nie uważałem ich za całkowicie konieczne, przynajmniej w tym kontekście. Należy jednak zauważyć, że znaczniki SVG prawidłowo używają focusableatrybutu, aby zapobiec umieszczeniu go na karcie klawiatury. Niezłe ruchy! ?

      Oto wynik:

      Zobacz
      nieuporządkowaną listę pióra jako ciągłą pionową oś czasu autorstwa Geoffa Grahama (@geoffgraham)
      na CodePen.

      Źródło