💻 Cómo crear un efecto de línea de tiempo en numeración y viñetas

Es posible que hayas visto el efecto de línea de tiempo en muchos sitios web. Por lo general, este tipo de efectos se lleva a cabo mediante el uso de plugins, en esta ocasión voy a mostrarte cómo podemos hacerlo mediante un sencillo código CSS.

¿Estás preparado para darle a tus numeraciones y viñetas un nuevo aspecto?, ¡pues vamos a ello!.

Antes de comenzar

Lo primero y antes que nada, tengo que advertirte que vamos a manipular la forma en la que Bloguer (en realidad es el propio HTML), muestra las numeraciones y las viñetas. Esto significa, que TODAS las numeraciones y TODAS las viñetas que tengas en tu sitio web quedarán afectadas por este estilo y se verán como líneas de tiempo.

Pero no te preocupes, también te enseñaré una forma rápida y sencilla de que este efecto sólo afecte a aquellos <ol> o <ul> que tú decidas.

Códigos para hacer el efecto de línea de tiempo

Vamos a trabajar con un código muy sencillo, es un simple código CSS, por lo que puedes ponerlo directamente en tu sitio web.

El código CSS que vamos a utilizar es el siguiente:

ol {
list-style-type: none;
}
.efecto li {
position: relative;
margin: 0;
padding-bottom: 1em;
padding-left: 20px;
}
.efecto li:before {
content: '';
background-color: #c00;
position: absolute;
bottom: 0px;
top: 0px;
left: 6px;
width: 3px;
}
.efecto 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;
}

Nuestro efecto se verá así, pero no te preocupes, enseguida lo arreglamos.

Este efecto se aplica a TODOS los elementos <ol> y <ul>

¿Qué hace este código?

•    Como puedes ver en la primera línea, cada vez que se encuentre un elemento <ol> se le desactiva el tipo de lista para que no muestre la bolita. A continuación se posicionan los elementos de lista mediante los parámetros position, margin y padding. De nuevo vuelve a colocar los elementos de lista antes y después con un color rojo y le dibuja una línea.
•    En definitiva, cada elemento de la lista <li> tiene un antes (before) del pseudo-elemento que está vacío (content: ‘ ‘) en cuanto al contenido, pero está marcado como 3 píxeles de ancho, una separación de la bolita de 5 píxeles y un color de fondo rojo. Esto crea la línea antes de cada <li>.

Este código para el efecto de línea de tiempo afecta a TODOS los <ol>. Solución

•    Como hemos dicho anteriormente, este código afecta a TODOS los <ol> de tu sitio, para hacer que sólo afecte a aquellos que tú quieras, solo tenemos que crear una clase y aplicarle a ese <ol> la clase que hemos creado.
•    En mi caso, la clase se llama .efecto y la colocamos en los <li> del código anterior. posteriormente, tenemos que aplicarle la clase .efecto al <ol> general que contiene los elementos que queremos que tengan este efecto.
•    Al aplicarle la clase al <ol> nos evitamos tener que aplicársela a todos los elementos de lista, se lo aplicamos al contenedor y él se encarga de hacer que todos los elementos de lista que dependen de él, queden afectados por esta clase.

Y el código HTML que vamos a utilizar será este:

<ol class="efecto">
<li>Opción 1</li>
<li>Opción 2</li>
<li>Opción 3</li>
<li>Opción 4</li>
<li>Opción 5</li>
</ol>

Y el resultado final será este:

1. Opción 1
2. Opción 2
3. Opción 3
4. Opción 4
5. Opción 5

Fuente:

Cómo crear un efecto de línea de tiempo en numeración y viñetas .