Edit an image using a 'content: url ()' tag :: after attribute

Question

Edit an image using a 'content: url ()' tag :: after attribute

Navigation

#1 by (1 votes)

2

I added an image url to a content: url (); but I want to edit the size of this image, straight from the .sub :: after tag, after adding a 'width :;' the image remains the same size, how do I change the width and height of the image through the :: 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>

html css

asked by anonymous 07.06.2018 / 19:36

1 answer

Flutter - BottomNavigationBar more than three blank items Pass variable via GET without action

score 1 · Accepted Answer

Young, in this case one option is not to use the image in content . Use it as background , then you can use background-size to control the size you want.

In this example I left the :: after with 200x200px, and the bg-img with 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>