2

Adicionei uma url de imagem em um content:url(); porém pretendo editar o tamanho dessa imagem, direto da tag .sub::after, após adicionar um 'width:;' a imagem continua do mesmo tamanho, como eu faço para alterar a largura e altura da imagem através do ::after ??

body{background-color:#CCCCFF;}

.menu{ display:inline-block; 
font-size:30px; 
font-weight:bold; 
color: #F00;
}
.sub::after{ content:url(https://cdn.icon-icons.com/icons2/512/PNG/512/css3-01_icon-icons.com_50918.png); 
display:block; 
width:200px;/*não surte efeito!*/
position:absolute;
}
.sub{ visibility:;
}
.menu:hover .sub{ visibility:;
}
<div class="menu">MENU-01
   <div class="sub"></div>
</div>

1 Resposta 1

1

Jovem, nesse caso uma opção é não usar a imagem no content. Use ela como background, ai vc pode usar o background-size para controlar o tamanho que vc quiser.

Nesse exemplo deixei o ::after com 200x200px, e o bg-img com 100x100px

body{background-color:#CCCCFF;}

.menu{ display:inline-block; 
font-size:30px; 
font-weight:bold; 
color: #F00;
}
.sub::after{ 
content:""; 
display:block; 
background-image: url("https://cdn.icon-icons.com/icons2/512/PNG/512/css3-01_icon-icons.com_50918.png");
width:200px;
height:200px;
background-size:100px 100px;
background-repeat: no-repeat;
position:absolute;
}
.sub{ visibility:;
}
.menu:hover .sub{ visibility:;
}
<div class="menu">MENU-01
   <div class="sub"></div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .