Untitled Post
En ocasiones puede que queramos colocar un fondo a nuestros listados html <ul> <ol> hasta aquí sin problemas, pero si ademas queremos usar los números que nos proporciona el “ol” es necesario hacer algo al estilo:
ol {
counter-reset:li; /* Initiate a counter */
margin-left:0; /* Remove the default left margin */
padding-left:0; /* Remove the default left padding */
}
ol > li {
position:relative; /* Create a positioning context */
}
ol > li:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.5em;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 1.5em;
padding: 4px;
border-top: 2px solid #31759f;
color: #fff;
background: #31759f;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
font-weight: bold;
font-size: 16pt;
text-align: center;
}
li ol,
li ul {margin-top:6px;}
ol ol li:last-child {margin-bottom:0;}
Apasionado de la montaña, del SEO y la programación a partes iguales, llevo más de 20 años trabajando en distintos sectores, pero siempre enfocado a la web, si quieres saber más de mí, sigue el enlace.