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

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.

CodePudding user response：

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>