Numerar secciones y subsecciones con CSS

Tiempo estimado de lectura: 3 minutos

 

Cómo crear secciones numeradas con CSS

En esta ocasión veremos como podemos numerar secciones y subsecciones utilizando código CSS. Ya sabemos hacerla mediante el editor, pero en esta ocasión aprenderemos a hacerlo mediante código. El resultado será algo parecido a lo que conseguimos utilizando Microsoft Word, pero en WordPress.

Crear una lista numerada siempre es interesante para nuestros artículos, pero imagínate que se cree de forma automática a medida que vayas formateando los textos utilizando por ejemplo <h1> y <h2>.

¡Vamos a ello!.

Código que vamos a utilizar para numerar secciones y subsecciones

Como hemos dicho antes, la idea es que a medida que vayamos dand0 formato a nuestro texto, se vayan creando de forma automática estas numeraciones.

Para lograrlo, utilizaremos el siguiente código CSS:

body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1:before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}

¿Y qué hace este código?

En primer lugar, le decimos a la etiqueta body que se van a utilizar secciones con numeraciones, a continuación le decimos a los <h1> y <h2> que comenzarán una subsección y se resetearán cuando encuentren otro <h1> y <h2>. Esto hará que cuando haya <h1> y <h2> anidados, el sistema reiniciará el contador y lo pondrá como dependiente de la anterior etiqueta <h1> y <h2>.

No sé si me he explicado, pero creo que si…

Código HTML que vamos a utilizar para numerar secciones y subsecciones

Lógicamente, necesitamos un código HTML que muestre el efecto. Pues este código podría ser algo parecido a este:

<h1>Título 1</h1>
<h2>Subtítulo 1</h2>
<h2>Subtítulo 2</h2>
<h2>Subtítulo 3</h2>
<h1>Título 2</h1>
<h2>Subtítulo 1</h2>
<h2>Subtítulo 2</h2>
<h1>Título 3</h1>
<h2>Subtítulo 1</h2>
<h2>Subtítulo 2</h2>
<h2>Subtítulo 3</h2>

Con este código creamos una estructura de títulos y subtítulos, y el resultado será este:

Resultado de numerar secciones y subsecciones con CSS
Resultado de numerar secciones y subsecciones con CSS


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *