Agradecemos tu ayuda para difundir nuestros escritos con relación a las ciencias de la computación.
Solución:
Aquí hay una buena solución. (Honestamente, me sorprendí a mí mismo con esto). CSS tiene algo llamado contadores, donde puede establecer, por ejemplo, números de capítulo automáticos en cada encabezado. Un poco de modificación te da lo siguiente; Tendrá que arreglar el relleno, etc. usted mismo.
ol
counter-reset: list;
ol > li
list-style: none;
ol > li:before
content: counter(list, lower-alpha) ") ";
counter-increment: list;
custom list style type (v1):
- Number 1
- Number 2
- Number 3
- Number 4
- Number 5
- Number 6
Funciona en todos los navegadores modernos e IE9+ (y posiblemente en IE8, pero puede tener errores).
Actualizar: Agregué un selector de niños para evitar que las listas anidadas elijan el estilo principal. trejder también tiene un buen punto en los comentarios de que la alineación de los elementos de la lista también está en mal estado. Un artículo en 456bereastreet tiene una buena solución que consiste en posicionar absolutamente el mostrador.
ol
counter-reset: list;
ol > li
list-style: none;
position: relative;
ol > li:before
counter-increment: list;
content: counter(list, lower-alpha) ") ";
position: absolute;
left: -1.4em;
custom list style type (v2):
- Number 1
- Number 2
- Number 3
- Number 4
- Number 5
- Number 6
Aquí hay un jsFiddle que muestra el resultado, incluidas las listas anidadas.
Partiendo de la respuesta de DisgruntledGoat, la amplié para admitir sublistas y estilos según lo necesitara. Compártelo aquí por si a alguien le sirve.
https://jsfiddle.net/0a8992b9/ salidas:
(i)first roman
(a)first alpha
(b)second alpha
(c)third alpha
(d)fourth alpha
(ii)second roman
(iii)third roman
(a)first alpha
(b)second alpha
Agregar esto al CSS dio algunos resultados interesantes. Estuvo cerca, pero no cigarro.
li:before
display: inline-block;
width: 1em;
position: relative;
left: -0.5em;
content: ')'
—– Editado para incluir la solución de Iazel, en los comentarios —–
He perfeccionado tu solución:
li
position: relative;
li:before
display: inline-block;
width: 7px;
position: absolute;
left: -12px;
content: ')';
background-color: #FFF;
text-align: center;
el fondo y position: absolute ¡Hizo el truco!