开发网站中::after伪元素不生效问题求助

你的::after伪元素没显示，大概率是这几个常见问题，逐个排查：

• 必须添加content属性：伪元素的核心依赖就是content，哪怕是空值也要声明，否则浏览器不会渲染这个伪元素。修改代码：

  &::after {
    content: ''; // 新增这一行
    position: absolute;
    right: 0;
    top: 0%;
    width: 216px;
    height: 254px;
    transform: rotateY(180deg);
    background: url(../images/life_history.svg) center/contain no-repeat;
  }
  

• 父元素需设置position: relative：你的伪元素用了position: absolute，它会相对于最近的非static定位父元素定位。如果父元素没设置position: relative/absolute/fixed，伪元素会相对于文档根节点定位，可能超出可视区域。给父元素加上：

  .your-parent-selector {
    position: relative;
  }
  

• 检查图片路径是否正确：打开浏览器开发者工具的「网络」面板，查看life_history.svg的请求状态，如果是404，说明路径写错了。根据你的SCSS文件位置调整路径，确认层级匹配。

• 排查样式覆盖问题：用浏览器开发者工具选中伪元素，看是否有其他样式把它的display设为none、opacity设为0，或者z-index太低被其他元素遮挡。

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