GitHub Pages中伪类::before内PNG图片无法显示的问题求助

针对你的情况，核心问题和修复方案如下：

• 移除伪类样式中的width: 0和height: 0
  你设置宽高为0会直接把伪类元素的显示区域压缩为空，就算图片加载成功也无法显示。直接删掉这两行代码即可。

• 调整定位与缩放参数
  移除宽高限制后，保留transform: scale(.3)来缩小图片，再根据实际显示效果微调left和top的值，确保箭头显示在h3左侧的合理位置。

• 验证图片路径正确性
  先直接访问你写的图片URL，确认图片能正常打开。如果打不开，检查仓库中图片的实际位置：

  • 若图片放在仓库根目录，当前绝对路径没问题；若放在子文件夹（比如images），要修改路径为对应子目录的地址
  • 注意GitHub区分文件名大小写，确保代码里的文件名和仓库里的完全一致（比如不要把Arrow.png写成arrow.png）

修改后的CSS示例：

.work h3 {
  padding-left: 5rem;
  position: relative;
}
.work h3::before {
  content: url(https://tacticsugar.github.io/Resume/arrow.png);
  display: inline-block;
  transform: scale(.3);
  position: absolute;
  top: 0.5rem; /* 可根据实际排版调整 */
  left: 1rem; /* 可根据实际排版调整 */
 }

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