Cómo colocar enumeraciones sólo con CSS

Esta no me la sabía. Resulta que todos saben que la manera más fácil de enumerar algo es por medio de listas ordenadas <ol> las cuáles podemos personalizar con CSS para decidir si queremos números arábigos, romanos o cualquier otro tipo de viñeta para las listas, pero resulta que esa no es la única manera de hacerlo.

Y es que si usamos listas estamos yendo a una sala de la muerte porque todo queda encapsulado de una forma muy fea en caso de que no queramos texto para listar, además de que es muy mala práctica usar listas para otra cosa que no sea texto corto. Por tal motivo en el tutorial de hoy vamos a ver cómo implementar enumeraciones con CSS, y ni siquiera es CSS3, es CSS2, una propiedad que es muy poca conocida pero ahora que la puse a prueba me agradó bastante.

Demo del tutorial

HTML

Quizá uno de los ejemplos más sencillos es el de listas títulos. Si nosotros pusiéramos una lista ordenada y dentro el contenido estamos ante una muy mala práctica HTML porque las listas no son contenedoras de contenido, solo de texto. Entonces es cuando hacemos uso de CSS.

CSS

Vamos a hacer uso del selector : before para colocar contenido antes de que empiece el contenido de la etiqueta, en este caso H2. Antes que nada en el body especificamos una variable first. la cual sirve como semilla inicial para que después de ahí todo empiece a incrementarse.

En el before del H2 lo que hacemos es decir la variable que queremos incrementar en valor, y más abajo decimos que la muestre. En el ejemplo puse un punto y un espacio para que no aparezca junto la numeración y el texto.

Si en vez de mostrar números arábigos queremos romanos podemos colocar como su fuera un parámetro más el estilo de la numeración.