Una forma refrescantemente simple (pero astuta) de crear una línea de tiempo vertical utilizando una lista desordenada semántica directa (<ul>) 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 tuvo la idea después de verla implementada en el sitio web de BBC News. Esa versión iba con una lista ordenada (<ol>) elemento que tiene sentido si estamos tratando con un orden específico de eventos. La toma de Peter usa una lista desordenada que también puede ser buena.
Para resumir, es una lista HTML estándar (la BBC usa <ol> pero me fui con <ul>) donde cada elemento de la lista (<li>) tiene un pseudo-elemento :before que está vacío en cuanto a contenido pero está marcado como de 2 píxeles de ancho con un color de fondo rojo. Esto crea la ‘línea’ antes de cada <li>. Luego, un estilo adicional posiciona este pseudo-elemento/línea.
La adición inteligente y ahorradora de marcado de SVG en el :after pseudo-elemento es cortesía de Saadat. La versión original incluía propiedades de fondo adicionales para contener el tamaño del SVG y evitar que se repitiera, pero no las encontré totalmente necesarias, al menos en este contexto. Sin embargo, tenga en cuenta que el marcado SVG utiliza correctamente el focusable atributo para evitar que se incluya en la pestaña del teclado. ¡Buenos movimientos! 👏
Aquí está el resultado:
Ver la pluma
Lista desordenada como línea de tiempo vertical continua por Geoff Graham (@geoffgraham)
en CodePen.
Fuente