CSS keep image in ::before from expanding past the pseudo-element

Question

I have a little mark at the bottom right of my own code snippet page, which should also contain my website's favicon. I want to use ::before for this but I have no clue how to resize the image to stay inside the 1em by 1em pseudo-element.

div#snippet {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(200,200,200,0.3);
}

a#l2020-link {
  color: blue;
  background-color: lightgrey;
  position: absolute;
  bottom: 10px;
  right: 10px;
  border: 0px solid grey;
  border-radius: 3px;
  padding: 3px;
  display: flex;
  flex-direcion: row;
}
a#l2020-link::before {
  content: url(https://www.lampe2020.de/favicon.ico);
  width: 1em;
  height: 1em;
  display: inline-block;
}

<div id="snippet">
  <!-- Imagine the code inputs and the iFrame to show the result here -->
  <a href="https://www.lampe2020.de/" id="l2020-link">Lampe2020.de</a>
</div>

I want the favicon to be fully visible but shrunk down to 1em by 1em.
I've tried CSS object-fit but it had absolutely null effect on the image no matter what I set it to. overflow: hidden or overflow: clip kinda work but they obviously just cut off what's too much of the image and don't resize the image to fit.

Answer 1

You can set the content to "" and use background-image instead, and set the background-size to 1em.

div#snippet {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(200,200,200,0.3);
}

a#l2020-link {
  color: blue;
  background-color: lightgrey;
  position: absolute;
  bottom: 10px;
  right: 10px;
  border: 0px solid grey;
  border-radius: 3px;
  padding: 3px;
  display: flex;
  flex-direcion: row;
}
a#l2020-link::before {
  content:"";
  background-image: url(https://www.lampe2020.de/favicon.ico);
  width: 1em;
  height: 1em;
  background-size:1em;
  display: inline-block;
}

<div id="snippet">
  <!-- Imagine the code inputs and the iFrame to show the result here -->
  <a href="https://www.lampe2020.de/" id="l2020-link">Lampe2020.de</a>
</div>