- Una lista numerada original ¿verdad?
- Un efecto conseguido con CSS
- .post-outer ol{
counter-reset:li;
margin-left:0;
padding-left:0
}
.post ol li{ /*Estilos de cada elemento*/
position:relative;
margin:0 0 20px 2em !important;
padding:4px 8px !important;
list-style:none;
*list-style: decimal;
border:1px solid #e2e3e2; /*Color de borde*/
background:#f2f2f2; /*Color de fondo*/
text-indent:10px;
}
.post ol li:before{ /*Los estilos del Número*/
content:counter(li);
counter-increment:li;
position:absolute;
top:-5px;
left:-5px;
font-family:'Oswald', serif;
font-size:14px;
width:12px;
margin:0 0 10px 0;
padding:4px !important;
color:#727272; /*Color de texto*/
text-align:left;
background:#e2e2e2; /*Color de fondo*/
text-indent:2px
}
.post ol li:after{
content:"";
position:absolute;
top:-5px;
left:14px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent#aeaeae; /*color del triangulito*/
} - Codigo que debe colocarse en Plantilla > Personalizar > Avanzado > Añadir CSS.
- Encontrareis más ejemplos y una explicación más detallada en el blog que me ha proporcionado este truco COMPARTIDISIMO
Su blog es muy bueno, muchos consejos que ayudan a sus lectores fantásticamente.
ResponderEliminarYo sigo y señalando.
Y al igual que su visita y presencia en mi humilde blog:
http://jonathanejonathan.blogspot.com.br/
Abrazos
Caio
esa es mi intención querido amigo, ayudar, ayudarnos... También sigo con entusiasmo tu blog. Un saludo
Eliminar