Una forma refrescantemente simple (pero astuta) de crear una línea de tiempo vertical utilizando una lista semántica desordenada y directa (
- ) 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 fue con una lista ordenada (
- ) elemento que tiene sentido si estamos tratando con un orden específico de eventos. La opinión de Peter usa una lista desordenada que puede ser igual de bien.
) tiene un pseudoelemento: before que está vacío en cuanto al 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- . Un estilo adicional posiciona este pseudoelemento / línea.
En pocas palabras, es una lista HTML estándar (la BBC usa
pero fui con
) donde cada elemento de la lista (
La adición inteligente de SVG en el :afterpseudoelemento que ahorra marcas 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 repita, pero no las encontré totalmente necesarias, al menos en este contexto. Sin embargo, tenga en cuenta que el marcado SVG utiliza correctamente el focusableatributo para evitar que se incluya en la pestaña del teclado. ¡Buenos movimientos! ?
Aquí está el resultado:
Consulte la
lista desordenada de la pluma como línea de tiempo vertical continua de Geoff Graham (@geoffgraham)
en CodePen.
Fuente