求助：如何让Shopify testimonial slider中after伪元素图片完美居中

方案一：修正伪元素 content:url 写法 #

直接调整现有代码的关键属性，解决缩放偏移和居中问题：

.prose::after {
    content: url('https://cdn.shopify.com/s/files/1/0780/3689/3975/files/5_star_png.png?v=1713317867');
    display: block;
    transform: scale(0.12);
    transform-origin: center center; /* 核心：缩放以中心为原点，避免偏移 */
    margin: 1em auto 0; /* 上下间距+左右自动居中 */
    /* 移除原有的width/height，scale已足够控制尺寸，硬设会导致定位混乱 */
}

方案二：改用 background-image 实现（更可控） #

如果之前用background没成功，是因为缺少关键属性，试试这个写法：

.prose::after {
    content: ''; /* 伪元素必须保留content，空字符串即可 */
    display: block;
    width: 120px; /* 直接写你要的最终宽度，比如原始图缩12%后的尺寸 */
    height: 24px; /* 对应高度，按比例计算 */
    background-image: url('https://cdn.shopify.com/s/files/1/0780/3689/3975/files/5_star_png.png?v=1713317867');
    background-size: cover; /* 图片填满容器且不变形 */
    background-position: center; /* 图片在容器内居中 */
    margin: 1em auto 0; /* 容器水平居中 */
}

新手避坑提示 #

• 不要同时用 width/height 和 transform:scale，两者会互相干扰导致定位偏移。
• 用浏览器F12开发者工具选中伪元素，实时调整参数看效果，比盲目改代码高效。
• 检查父元素 .prose 是否有设置 text-align:center，如果有的话，方案一也可以把 display:block 改成 display:inline-block，同样能居中。

内容的提问来源于stack exchange，提问作者Sam