Seo Cantineoqueteveo madrid

Lista Personalizada

Compartir
Valora éste Post

Copia y pega el siguiente código en el css adicional de tu theme.

/*Lista personalizada*/
ol.pasos {
    list-style-type: none;
    margin: 0 0 1.5rem .5rem;
}

ol {
    list-style: decimal;
}
ol {
    margin: 0 0 1.5em 3em;
}
ol.pasos li {
    counter-increment: step-counter;
    margin: 0 0 1rem;
    padding: 0 0 0 50px;
    font-family: "Segoe UI", serif;
    position: relative;
}
*, *:before, *:after {
    box-sizing: inherit;
}
ol.pasos li:before {
    content: counter(step-counter);
    font-size: 1.1rem;
    background-color: brown !important;
    color: #fff;
    font-weight: bold;
    padding: 3px 3px 3px;
    border-radius: 10px;
    font-family: "Lato", serif;
    display: block;
    min-width: 40px;
    text-align: center;
    position: absolute;
    top: 3px;
    left: 0;
}
*, *:before, *:after {
    box-sizing: inherit;
}

Para personalizar solo debes escribir de la siguiente manera en formato html en tu editor wordpres.

<ol class="pasos">
 	<li>Numero 1</li>
 	<li>Numero 2</li>
 	<li>Numero 3</li>
 	<li>Numero 4</li>
</ol>

Así será el resultado

  1. Numero 1
  2. Numero 2
  3. Numero 3
  4. Numero 4
Compartir
Escrito Por
David Cruz
Únete a la discusión

David Cruz