Estilos CSS de Listas Ordenadas

Estilizar listas numeradas ordenadas con CSS no es tan simple como se podría pensar porque no hay un selector CSS para los números de la lista. Estilizarlos solo es posible con una técnica CSS3 sencilla que utiliza un contador para reemplazar los números predeterminados.

Los números estilizados serán visibles únicamente en navegadores con soporte para CSS3, pero en caso de que no sea así los números no estilizados por defecto serán mostrados en su lugar.

Estilo CSS <ol>

Los contadores CSS son variables que son incrementadas utilizando reglas CSS. Reiniciando un contador cada etiqueta ol e incrementándolo en cada etiqueta li se replica una lista numerada.Luego, simplemente fija el contenido el contenido de li como el valor del contador. Para crear tu propio estilo CSS ol empieza con:

ol.mylist {
	list-style-type: none;
	counter-reset: ol-counter;
}
ol.mylist > li:before {
	content: counter(ol-counter);
	counter-increment: ol-counter;
}

Para utilizar números romanos cambia la regla de contenido a content: counter(ol-counter, upper-roman); (para I,II,III,IV...). Para letras, usa lower-alpha (a,b,c,d...) o upper-alpha (A,B,C,D...). Con el código de arriba no van a ser mostrados números en los navegadores que no soporten los contadores como Internet Explorer 7 o inferior. Agrega la línea list-style-type: decimal !ie; para que una lista normal no estilizada sea mostrada en IE7.

Algunos estilos <ol>

Dejo algunos estilos CSS <ol> que cree utilizando la técnica explicada arriba. Siéntete en confianza de copiar y modificar los códigos o usar el código tal cual lo presento.

Todos los ejemplos utilizar el truco para que los números sean mostrados en IE7. Remover este truco puede probar el código ( en caso de que la línea sea leída por un nuevo navegador, cancelando el truco), pero entonces esos navegadores no mostrarán números del todo.

Visita nuestro sitio demostración para ver las listas ordenadas CSS trabajando:

Demo

Simple

Simple. Un número y un borde, nada más:

Listas ordenadas simples

ol.simple-list {
	list-style-type: none;
	list-style-type: decimal !ie; /*IE 7- hack*/
	
	margin: 0;
	margin-left: 3em;
	padding: 0;
	
	counter-reset: li-counter;
}
ol.simple-list > li{
	position: relative;
	margin-bottom: 20px;
	padding-left: 0.5em;
	min-height: 3em;
	border-left: 2px solid #CCCCCC;
}
ol.simple-list > li:before {
	position: absolute;
	top: 0;
	left: -1em;
	width: 0.8em;
	
	font-size: 3em;
	line-height: 1;
	font-weight: bold;
	text-align: right;
	color: #464646;

	content: counter(li-counter);
	counter-increment: li-counter;
}

Números inclinados

Números inclinados parcialmente cubiertos. Dependiendo de la fuente que utilices puedes necesitar cambiar la propiedad "left" de seudo-elementos para ajustar la visualización.

Lista ordenada con números inclinados

ol.tilted-list {
	list-style-type: none;
	list-style-type: decimal !ie; /*IE 7- hack*/
	
	margin: 0;
	margin-left: 3em;
	padding: 0;
	
	counter-reset: li-counter;
}
ol.tilted-list > li{
	position: relative;
	margin-bottom: 20px;
	padding: 1em;
	border-left: 2px solid #CCCCCC;
	background-color: #f5f5f5;
}
ol.tilted-list > li:before {
	position: absolute;
	top: 0;
	left: -0.95em;
	width: 1em;

	font-size: 4em;
	line-height: 1;
	font-weight: bold;
	text-align: right;
	color: #464646;
	
	transform: rotate(-25deg);
	-ms-transform: rotate(-25deg);
	-webkit-transform: rotate(-25deg);
	z-index: -99;
	overflow: hidden;
	
	content: counter(li-counter);
	counter-increment: li-counter;
}

Círculos

Los círculos lucen geniales en colores. Cambia el borde y los colores para ajustarlos a tu tema. Añadir sombras puede mejorar la visualización.

Circles ordered list style

ol.circles-list {
	list-style-type: none;
	list-style-type: decimal !ie; /*IE 7- hack*/
	
	margin: 0;
	margin-left: 4em;
	padding: 0;
	
	counter-reset: li-counter;
}
ol.circles-list > li{
	position: relative;
	margin-bottom: 20px;
	padding-left: 0.5em;
	min-height: 3em;
}
ol.circles-list > li:before {
	position: absolute;
	top: 0;
	left: -1.33em;
	width: 1.2em;
	height: 1.2em;
	
	font-size: 2.5em;
	line-height: 1.2;
	text-align: center;
	color: #f5f5f5;

	border: 3px solid #c5c5c5;
    border-radius: 50%;
	background-color: #464646;
	content: counter(li-counter);
	counter-increment: li-counter;
}

Cajas

Boxes ordered list style

ol.boxes-list {
	list-style-type: none;
	list-style-type: decimal !ie; /*IE 7- hack*/
	
	margin: 0;
	margin-left: 3em;
	padding: 0;
	
	counter-reset: li-counter;
}
ol.boxes-list > li{
	position: relative;
	margin-bottom: 15px;
	padding: 1em;
	
	background-color: #d5d5d5;
}
ol.boxes-list > li:before {
	position: absolute;
	top: 0;
	left: -1em;
	width: 0.94em;
	height: 0.94em;
	
	font-size: 3em;
	line-height: 0.94;
	text-align: center;
	color: #f5f5f5;

	background-color: #464646;
	content: counter(li-counter);
	counter-increment: li-counter;
}

Rotulados

Labels ordered list style

ol.labels-list {
	list-style-type: none;
	list-style-type: decimal !ie; /*IE 7- hack*/
	
	margin: 0;
	margin-left: 1em;
	padding: 0;
	
	counter-reset: li-counter;
}
ol.labels-list > li{
	position: relative;
	margin-bottom: 1.5em;
	padding: 1.5em;
	background-color: #eaeaea;
}
ol.labels-list > li:before {
	position: absolute;
	top: -0.3em;
	left: -0.5em;
	width: 1.8em;
	height: 1.2em;
	
	font-size: 2em;
	line-height: 1.2;
	font-weight: bold;
	text-align: center;
	color: #464646;
	background-color: #d0d0d0;
	
	transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	-webkit-transform: rotate(-20deg);
	z-index: 99;
	overflow: hidden;
	
	content: counter(li-counter);
	counter-increment: li-counter;
}

Visita nuestro demo para ver las listas anteriores:

DEMO

Recursos útiles:

¡Comparte cualquier lista creativa que hayas diseñado!

2 comments

Deja un comentario

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>