CSS

CSS: Alterando a altura e largura de uma imagem com pseudo-elementos :before/:after

Supondo que você tenha um menu e queira adicionar um ícone antes dos links e ajustar a altura e largura.

<ul class="menu">
<li><a href="" title="">Link 1</a></li>
<li><a href="" title="">Link 2</a></li>
<li><a href="" title="">Link 3</a></li>
</ul>
body {
  background-color: black;
}
.menu a { color: white; }
 
.menu a::before{
  background-image: url('url_da_imagem');
  background-size: 20px 20px;
  display: inline-block;
  width: 20px;
  height: 20px;
  content: "";
}

Para adicionar um ícone para cada link de menu, basta adicionar uma classe e referenciar no código CSS.

<ul class="menu">
<li><a href="" title="">Link 1</a></li>
<li><a href="" title="" class="link_2">Link 2</a></li>
<li><a href="" title="">Link 3</a></li>
</ul>
body {
  background-color: black;
}
.menu a { color: white; }
 
.menu a.link_2::before{
  background-image: url('url_da_imagem');
  background-size: 20px 20px;
  display: inline-block;
  width: 20px;
  height: 20px;
  content: "";
}

Para finalizar, caso queira o ícone após o link, troque o ::before por ::after.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *