miércoles, 21 de agosto de 2013

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;}