Tailwind中::after伪元素设置content图片不显示问题咨询

问题复现代码 #

正常生效的原生CSS #

.text-location {
  display: flex;
  gap: 1.625rem;
}

.text-location::after {
  content: url('image/arrow-down-icon.svg');
  display: inline-block;
  width: 100%;
  height: 100%;
}

原生实现效果：

失效的Tailwind写法 #

<label class="font-poppins text-sm font-light leading-[0.875rem] text-[#969696] flex gap-[1.625rem] after:content-[url('image/arrow-down-icon.svg')] after:inline-block after:h-full after:w-full">Location</label>

失效效果：

核心原因 #

Tailwind 任意值语法解析时，会把url()内部包裹路径的单引号识别为类名的边界符号，导致最终生成的CSS中content属性值残缺，伪元素无法正常加载图标。
另外如果使用Vite/Webpack等构建工具，写在类名中的相对路径不会被构建工具自动处理，容易出现资源404问题。

修复步骤 #

1. 修正content属性写法
   去掉url()内部包裹路径的引号，避免类名解析错误：

<!-- 把after:content-[url('xxx')] 改为 after:content-[url(xxx)] -->
<label class="font-poppins text-sm font-light leading-[0.875rem] text-[#969696] flex gap-[1.625rem] after:content-[url(image/arrow-down-icon.svg)] after:inline-block after:h-full after:w-full">Location</label>

2. 排查资源路径问题
   如果改完写法仍不显示，打开浏览器开发者工具的网络面板检查SVG请求是否404：

• 构建工具项目建议把SVG放到public静态资源目录，使用根绝对路径引用：after:content-[url(/image/arrow-down-icon.svg)]
• 也可以直接将SVG转为base64格式的data URI写入content，彻底规避路径解析问题。

3. 优化尺寸控制（可选）
   当前伪元素设置的w-full h-full会让图标占满flex剩余空间，如果需要固定图标尺寸，可以替换为固定宽高类，搭配after:object-contain、flex items-center保证图标垂直居中不变形：

<label class="font-poppins text-sm font-light leading-[0.875rem] text-[#969696] flex items-center gap-[1.625rem] after:content-[url(/image/arrow-down-icon.svg)] after:inline-block after:w-4 after:h-4 after:object-contain">Location</label>

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