Edit an image through a content:url ( )' attribute of the ::after tag

Question

I added an image url to a content:url(); however, I intend to edit the size of this image, straight from the tag. sub::after, after adding a 'width:;' the image continues to the same size, as I do to 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>

Answer 1

Young man, in this case an option is not to use the image in content. Use her as background, Then you can use the background-size to control the size you want.

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