如何在CSS的before/after伪元素中插入图片并自定义尺寸

你的代码里有几个关键问题导致图片无法按期望尺寸显示：

• 背景色覆盖背景图：background:#222写在background-image之后，会直接覆盖背景图片，导致图片根本无法显示
• 父元素缺少定位上下文：伪元素使用position: absolute后，若父元素li未设置position: relative，伪元素会相对于整个文档流定位，尺寸和位置控制都会失效
• 无效属性冗余：justify-content:center是Flex布局专属属性，伪元素未启用Flex布局时该属性完全不起作用

修正后的代码示例：

/* 给父元素设置定位上下文，让伪元素基于li定位 */
li {
  position: relative;
  /* 添加上内边距避免伪元素覆盖li内部内容 */
  padding-right: 90px;
}

li::after{
    content:" ";
    position: absolute;
    top: 10px;
    right: 10px; /* 固定伪元素在li右侧的位置 */
    /* 设置目标尺寸 */
    width: 70px;
    height: 70px;
    /* 背景色放在背景图前，或直接移除不需要的背景色 */
    background:#222;
    background-image: url("https://i.pinimg.com/originals/9f/16/32/9f163259165a9031b62fbd8c38746645.jpg?hl=en_US");
    background-repeat: no-repeat;
    /* 让图片适配伪元素尺寸，可选值：cover（保持比例填满）/contain（保持比例完整显示）/具体像素 */
    background-size: 100% 100%;
    border-radius: 50%; /* 用50%实现圆形比固定35px更灵活 */
    border-top: 2px solid #222;
}

额外提示：

• 伪元素的content必须设置（哪怕是空字符串""），否则伪元素不会被渲染
• 该控制逻辑完全适用于::before伪元素，只需把::after替换为::before即可

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