浏览器检查器显示::before伪元素为display:inline，但实际设置为block的问题

• 添加content属性是核心
  :before/:after伪元素必须通过content属性生成可渲染的盒子，缺失这个属性时，浏览器不会识别该伪元素的布局规则，即使设置了display:block也会被忽略，强制 fallback 为inline，导致宽高属性完全失效。直接添加空内容即可：content: '';

• 修正背景图路径
  检查image.jpg的路径是否匹配实际文件位置：

  • 若图片与CSS文件同目录，直接写url("image.jpg")
  • 若图片在子目录（如images文件夹），写url("./images/image.jpg")
  • 若图片在项目根目录，写url("/image.jpg")

• 确保定位上下文正确
  伪元素使用了position: absolute，必须给父元素.test设置position: relative，否则伪元素会相对于整个文档定位，可能超出可视区域，导致你误以为背景图未显示。

修正后的完整CSS代码：

.test {
  position: relative; /* 为绝对定位提供上下文 */
}

.test:before {
    content: ''; /* 必须添加的关键属性 */
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 2rem;
    height: 3rem;
    display: block;
    position: absolute;
    left: -3.5rem;
    font-size: 3rem;
    background-image: url("image.jpg");
}

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