before伪类背景不显示，需在导航项文本前添加图标

嘿，我来帮你搞定这个before伪类背景图不显示的问题！结合你给出的代码，我整理了几个最可能的原因和对应的解决方案：

1. 检查CSS路径的相对位置（最常见原因） #

伪元素的背景图路径是相对于CSS文件所在的目录，而不是HTML文件的位置！你提到body用相同路径能显示，很可能是body的样式路径刚好匹配，但伪类的路径因为CSS文件的位置不同而失效了。

解决办法： #

• 改用根目录绝对路径（推荐），这样不管CSS文件在哪，路径都不会错：

li.nav-item.my-account:before {
  content: '';
  display: inline-block; /* 改成inline-block更适配行内布局 */
  width: 50px;
  height: 50px;
  background: url("/images/icons/user.svg") no-repeat; /* 开头加/，从网站根目录开始找 */
  background-size: contain; /* 确保图片适配容器大小 */
}

• 如果坚持用相对路径，确认CSS文件到图片的层级：比如CSS在/css/style.css，图片在/images/icons/user.svg，那相对路径是../images/icons/user.svg（和你现在的写法一致），但如果CSS在/assets/css/style.css，那路径就得是../../images/icons/user.svg。

2. 调整伪元素的布局与显示方式 #

你用了display:block，这会让伪元素独占一行，可能导致它被挤出可视区域，或者被a标签覆盖：

li.nav-item.my-account {
  position: relative; /* 给父元素设相对定位 */
  padding-left: 60px; /* 给图标留出空间，避免和文字重叠 */
}
li.nav-item.my-account:before {
  content: '';
  display: inline-block;
  width: 50px;
  height: 50px;
  background: url("/images/icons/user.svg") no-repeat;
  background-size: cover;
  position: absolute; /* 绝对定位到li的左侧 */
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
}

这样调整后，图标会和文字在同一行，且不会被遮挡。

3. 确认图片本身的问题 #

• 检查图片路径是否拼写正确（注意大小写、文件名后缀，比如.svg有没有写成.SVG）
• 打开浏览器开发者工具（F12），在Elements面板找到伪元素，查看Background属性，看图片是否加载失败（如果显示broken image图标，就是路径问题；如果没显示，可能是宽高或display的问题）

4. 排查样式优先级问题 #

确保没有其他CSS规则覆盖了这个伪类的样式，比如有没有更具体的选择器（比如.nav-container li.nav-item:before）把你的样式覆盖了，可以给伪类加!important临时测试（不推荐长期使用，但可以快速排查问题）：

li.nav-item.my-account:before {
  content: '' !important;
  display: inline-block !important;
  width: 50px !important;
  height: 50px !important;
  background: url("/images/icons/user.svg") no-repeat !important;
}

试试上面的方法，应该能解决你的问题～

内容的提问来源于stack exchange，提问作者Jaroslaw Nowak