CSS - smaller image in proportion for content property

Question

If you want to make the image smaller in proportion (reducing its width but keeping the aspect ratio), you can use the content property with the url() function inside a ::before pseudo-element, but you'll need to use additional CSS rules to control the size. You can use the background-image property for this purpose, as it allows you to manipulate the size more easily. Here's how you can do it:

.yourcategory::before {
    content: "";
    background-image: url(images/icons/ico_lr.png?=v1);
    background-size: 24px auto;
    width: 24px;
    height: 24px;
    display: inline-block;
}