将图像置于伪元素之后或之前居中

Question

我被困在这个上了！我正在尝试将 5 颗星的图像添加到 Shopify 上的推荐滑块中。我一直在使用 CSS 并缩放到我想要的图像大小，调整间距等 - 但我无法让它完美居中。我当前的代码是：

.prose::after {
    content: url('https://cdn.shopify.com/s/files/1/0780/3689/3975/files/5_star_png.png?v=1713317867');
 display: flex;
  width:10px;
  height:20px;
   transform: scale(.12);
    margin-block-start: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
      justify-items: center;
  align-content:start;
  }

还有下面的图片！任何提示都非常感谢。

尝试调整显示，将内容更改为背景等。我是自学成才，但对此很陌生，帮助！！

Answer 1

在看不到 HTML 的情况下，这会将星星置于

prose

div 的中心。

justify-items

应该是

justify-content

并且

width

最有可能应该是

100%

，否则你会尝试将星星集中在

10px

内

我还删除了

transform: scale(.12)

，因为这会让你的元素变得非常小。

.prose::after {
  content: url('https://cdn.shopify.com/s/files/1/0780/3689/3975/files/5_star_png.png?v=1713317867');
  display: flex;
  width: 100%;
  height: 20px;
  margin-block-start: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  justify-content: center;
}

<div class="prose">

</div>