Solucionado
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;
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:
Vê se eu entendi certo, 100% = 2em ? Tipo uma conversão de medidas.
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?