How to Change the Height of an Image in CSS :Before/:After Pseudo-Elements

Can I change the height of an image in CSS :before/:after pseudo-elements?

Adjusting the background-size is permitted. You still need to specify width and height of the block, however.

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

See the full Compatibility Table at the MDN.

How to change the size of an image inserted with ::before or ::after peudo-element in CSS

Hi why dont you add your image as a background image and add the following

.smile::before{
  content: ' ';
  background-image: url(../../../../Pictures/Smilie.jpg);
  background-size:contain;
  height: 100px;
  width: 100px;
 }

How can I set size of css-content-image?

also, you could set the content to empty string and use a background image. Just alternatively...

.upper-menu .search-form::after {
  content: ' ';
  display: inline-block;
  position: absolute;
  background: #bada55 url("img_2x.png") no-repeat;
  background-size: contain;
  height: 10px;
  width: 10px;
  top: 5px;
  right: 22px;
}

How do I resize an image in a pseudo-element?

Since you are already using transforms, go a step further. Use them to move and rescale the image:

.box::after{
    content: url(http://www.clker.com/cliparts/9/5/e/b/12428065451316964828Simple_crown_icon.svg.med.png);
    position: absolute;
    top: -10px;
    right: -10px;
    width: 0.1em;
    height: 0.1em;
    -webkit-transform: translateY(-35px) rotate(45deg) scale(0.2);
    -moz-transform: translateY(-35px) rotate(45deg) scale(0.2);
}

updated fiddle

An object with fixed sizes inside :before or :after pseudo element

From my answer to this related question:

In the meantime, if you want to be able to resize the :after pseudo-element and the image that's generated, you will need to apply it as a background image instead and — assuming browser support isn't an issue — use background-size along with width and height to scale it (based on the understanding that those properties apply to the pseudo-element box instead).

So, instead of

content: url("../images/img.png");

use

background-image: url("../images/img.png");
background-size: cover;

(or the shorthand, background: url("../images/img.png") 0 0 / cover)

As for scaling your pseudo-element proportionally, I think you should be able to accomplish this using the padding-bottom trick. For an image with a ratio of 1:2, padding-bottom: 200% seems to work in this example:

.container {  border: thick solid;  margin: 1em;}
.large.container { width: 100px; }.small.container { width: 50px; }
.container::after {  content: '';  display: block;  background: url(http://placehold.it/100x200) 0 0 / cover;  padding-bottom: 200%;}

<div class="large container"></div><div class="small container"></div>

footer {
  background: #555;
  position: relative;
  margin-top: 100px;
}

footer::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 100%;
  left: 0;
  display: inline-block;
  background-image: url('https://cdn.shopify.com/s/files/1/0213/6954/files/pattern-1920x100px.png?v=1602752799');
  background-color: #555;
  background-position: center;
  background-attachment: fixed;
}

<footer>
  <div class="container">
    <div class="row">
      <div class="col">
        <h4>Cat 1</h4>
        <ul class="nav flex-column">
          <li><a class="nav-link" href="#">A</a></li>
          <li><a class="nav-link" href="#">B</a></li>
          <li><a class="nav-link" href="#">C</a></li>
        </ul>
      </div>
      <div class="col">
        <h4>Cat 2</h4>
        <ul class="nav flex-column">
          <li><a class="nav-link" href="#">D</a></li>
          <li><a class="nav-link" href="#">E</a></li>
          <li><a class="nav-link" href="#">F</a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>