Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Não entendi o comentário da linha: background-size: 50% 50%; /* para a imagem ter 1em x 1em */

Boa tarde, Não entendi a ligação de 50% 50% com 1em da imagem.

insira seu código aqui

/* adicionamos essa classe aos rótulos que terão ícone */
.com-icone::after {
    content: ''; /* não podemos esquecer do content! */
    width: 2em;
    height: 2em;
    background-color: #8C1D3D;
    background-size: 50% 50%; /* para a imagem ter 1em x 1em */
    background-position: center;
    background-repeat: no-repeat;
4 respostas

Isso é por causa da altura (height) e largura (width). 100% de background-size seria 2em. 50%, a metade. Ou seja, 1em.

Montei esse JSBin pra você dar uma olhada na diferença:

https://jsbin.com/kubiwuf/edit?html,css,output

Vê se eu entendi certo, 100% = 2em ? Tipo uma conversão de medidas.

solução!

Isso mesmo! Porcentagem é sempre referente a alguma coisa. Altura e largura, quando em porcentagem, costumam ser referentes à altura e largura do elemento pai. "Quanto que eu, div filha, devo ocupar do meu elemento pai?"

Quanto ao background-size, ele é referente a propria largura e altura do elemento. "Quanto que eu, background, devo ocupar deste meu elemento?"

No caso estamos falando de background-size, por isso é uma porcentagem com relação a altura e largura desse mesmo elemento. Como a altura e largura são ambos 2em, então sim, 100% nesse caso seria 2em, 50% seria 1em.

Oi Carolina!

Se alguma das respostas respondeu sua dúvida, pode marcá-la como solução?