html - 设置带有图片网址内容的伪元素的宽度

This question already has answers here:

Can I change the height of an image in CSS :before/:after pseudo-elements?
（12个答案）
三年前关闭。
我有一页应该可以打印。问题是页面包含了一些background-image元素（打印时看不到图像），因此我尝试为打印机创建一个样式表，其中包含一些伪元素，可以帮助我显示图像，如下所示：

.pbar-fill {
  background: none !important;
}
.pbar-fill::before {
  content: url("/images/bg-progress-bar-big01.gif") !important;
  position: absolute !important;
  z-index: 1003 !important;
  width: 23px !important;
}

它并不顺利，因为图像总是得到它的全宽（220px）。

最佳答案

伪元素只是一个包含生成内容的框。所以你不能调整图像的大小。
这个线程非常全面地覆盖了所有选项
Can I change the height of an image in CSS :before/:after pseudo-elements?
最好的选择似乎是将图像缩放到任何合适的大小。但这很可能是在任何地方都要谨慎实施的方法。

.pbar-fill::before {
    content: url('image.jpg');
    transform: scale(.5);
}