Uma maneira refrescantemente simples (mas engenhosa) de criar uma linha do tempo vertical usando uma lista direta e semântica não ordenada (
- ) de 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 teve a ideia depois de vê-la implementada no site da BBC News. Essa versão veio com uma lista ordenada (
- ) elemento que faz sentido se estivermos lidando com uma ordem específica de eventos. O take de Peter usa uma lista não ordenada, o que pode funcionar bem.
) tem um pseudo-elemento: before que está vazio em termos de conteúdo, mas está marcado como tendo 2 pixels de largura com uma cor de fundo vermelha. Isso cria a 'linha' antes de cada- . O estilo posterior posiciona esse pseudo-elemento / linha.
Resumindo, é uma lista HTML padrão (a BBC usa
mas eu fui com
) onde cada item da lista (
A adição inteligente de SVG ao :afterpseudoelemento com economia de marcação é cortesia de Saadat. A versão original incluía propriedades de fundo adicionais para conter o tamanho do SVG e evitar que ele se repetisse, mas não as achei totalmente necessárias, pelo menos neste contexto. No entanto, observe que a marcação SVG usa corretamente o focusableatributo para evitar que seja incluído na guia do teclado. Belos movimentos! ?
Aqui está o resultado:
Veja a
lista de canetas não ordenadas como linha de tempo vertical contínua de Geoff Graham (@geoffgraham)
em CodePen.
Fonte