GitHub Pages部署后伪元素引入的图片无法显示问题求助

问题核心原因 #

你遇到的是CSS相对路径解析规则+GitHub Pages子仓库路径的组合问题，和伪元素特性完全无关。

路径解析的核心规则 #

CSS文件中引用的所有外部资源（包括图片、字体等）的路径，都是相对于CSS文件本身的存放位置，而非HTML入口文件或者站点根目录的位置，这点是很多新手容易搞混的核心误区。

你的项目结构是：

• 项目根目录
  • index.html
  • css/ （存放CSS文件）
  • images/ （存放icon-arrow-down.svg）

不同路径写法的问题排查 #

1. 以/开头的绝对路径问题
   GitHub Pages 非根域名仓库的站点会自动带上仓库名作为子路径，这时候/images/icon-arrow-down.svg会被解析到站点根路径下的images文件夹，缺少了仓库名的子路径，自然找不到资源。
2. 正确的相对路径写法
   你的CSS文件存放在css文件夹下，要访问同级的images文件夹里的资源，需要先回到上一级目录，再进入images文件夹，正确写法如下：

question::after {
  content: url("../images/icon-arrow-down.svg");
  position: absolute;
  top: 0px;
  right: 0px;
}

3. 之前测试../无效的常见原因
   如果你是直接在本地打开HTML文件（地址栏为file://开头），本地文件的路径解析规则和HTTP服务的规则不一致，会出现路径失效的情况。建议本地测试时使用静态服务启动项目，比如VS Code的Live Server插件，本地测试环境和线上环境规则一致，就不会出现本地/线上表现不同的问题。
4. 部署后的验证步骤
   修改路径后重新部署，打开浏览器控制台的「网络」面板，过滤图片请求，查看箭头图片的请求地址是否和仓库内图片的实际路径一致，如果出现404可以强制刷新清空浏览器缓存后再验证。

内容的提问来源于stack exchange，提问作者A. E.