CSS: How can an image be set correctly with ::after?

If only an adjustment with CSS is possible to place an image at a certain position, the solution via :after pseudo element is the best.

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

Alternative with ‘mask’:

.elementor-post__read-more:after {
  width: 20px;
  height: 14px;
  display: inline-block;
  content: '';
  mask: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.53 5.95" xml:space="preserve"><path d="M4.505.008a.16.16 0 0 0-.094.166c.007.04.171.208 1.309 1.348l1.301 1.302H3.57c-3.439 0-3.451 0-3.492.025A.186.186 0 0 0 0 2.981c0 .012.009.04.021.064.041.087-.266.08 3.546.08h3.454l-1.3 1.302c-1.359 1.36-1.333 1.332-1.309 1.412.013.042.067.095.108.104.092.02.039.069 1.546-1.436.861-.859 1.436-1.442 1.447-1.467.014-.033.015-.052.004-.094-.013-.048-.166-.205-1.454-1.494C4.696.084 4.621.011 4.574.006a.208.208 0 0 0-.069.002"/></svg>') no-repeat 50% 50%;
  -webkit-mask: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.53 5.95" xml:space="preserve"><path d="M4.505.008a.16.16 0 0 0-.094.166c.007.04.171.208 1.309 1.348l1.301 1.302H3.57c-3.439 0-3.451 0-3.492.025A.186.186 0 0 0 0 2.981c0 .012.009.04.021.064.041.087-.266.08 3.546.08h3.454l-1.3 1.302c-1.359 1.36-1.333 1.332-1.309 1.412.013.042.067.095.108.104.092.02.039.069 1.546-1.436.861-.859 1.436-1.442 1.447-1.467.014-.033.015-.052.004-.094-.013-.048-.166-.205-1.454-1.494C4.696.084 4.621.011 4.574.006a.208.208 0 0 0-.069.002"/></svg>') no-repeat 50% 50%;
  -webkit-mask-size: cover;
    mask-size: cover;
  margin-left: 7px;
  background-color: #d51030;
  transition: all .3s;
}

.elementor-post__read-more:hover:after {
  background-color: #000;
  transition: all .3s;
}