About the size of images set on pseudo-elements
When setting an image directly on a CSS pseudo-element ( ::before, ::after, etc.), it is not possible to specify the size of the image in the same way as for normal elements. However, using the background-image property, it is possible to set an image as the background of a pseudo-element and specify its size.
Why can’t the size be specified directly for a pseudo-element?
Pseudo-elements are rendered as elements without content. Therefore, if an image URL is specified in the content property, it is usually displayed at the original size of the image.
Workaround
You can avoid this problem by using the method of setting an image as the background of the pseudo-element; use properties such as background-image, background-size, and background-repeat appropriately to achieve the desired display.
Specific usage examples
.element::before {
content: '';
display: inline-block;
width: 50px;
height: 50px;
background-image: url('path/to/image.jpg');
background-size: no cover; background-repeat: no-repeat;
}Summary
When specifying the size of an image set on a pseudo-element, it is effective to use the method of setting it as a background image. Using this method, the display of images on pseudo-elements can be flexible.