Las listas ordenadas en HTML se representan mediante la etiqueta OL. Y mediante el uso de CSS podemos alterar el tipo de lista ordenada que queremos que sea.

Para ello tenemos la propiedad list-style-type. Con ella podremos indicar que los números de la lista sean romanos. Además podemos indicar que sean en mayúsculas o minúsculas. Es por ello que tenemos dos valores para la propiedad list-style-type: upper-roman para las mayúsculas y lower-roman para las minúsculas.

Lo que vamos a hacer para definir una lista CSS de números romanos es definir dos estilos: «romanos_upper» y «romanos_lower», los cuales utilizaremos con las listas de nuestra página web.

La definición de los estilos quedará como sigue:

.romanos_upper{
  list-style-type:upper-roman;
}
.romanos_lower{
  list-style-type:lower-roman;
}

Ya solo nos quedará utilizar el atributo class del elemento OL para asignarles un estilo u otro. Veamos como quedaría el código:

Primer elemento
Segundo elemento
Tercer elemento
Cuarto elemento
Quinto elemento

Y de esta forma tan sencilla tenemos una lista CSS de números romanos.

Publicaciones relacionadas:

Imágenes como hitos de listas con CSS Número de inicio de una lista con CSS Incrementar items de una lista HTML de dos en dos Resaltar los enlaces con CSS Pseudo-elementos tipograficos: Primera línea de un párrafo