Utilizzare pseudo-elementi come elementi del DOM

Spesso si usano elementi del DOM vuoti per ritagliare sprite accanto ad alcuni link di interfaccia. Una valida alternativa è applicare l’immagine sprite allo pseudo-elemento :before.

<ul class="actions">
   <li class="save"><a href="#">Salva</a></li>
   <li class="delete"><a href="#">Elimina</a></li>
   <li class="share"><a href="#">Condividi</a></li>
   <li class="comment"><a href="#">Commento</a></li>
</ul>
.actions li:before{
   content:"";
   float:left;
   width:19px;
   height:19px;
   background:url(sprite.png) no-repeat;
}

.actions li.save:before{
    background-position:-20px -85px;
}
Vai all'archivio
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github