自定义SVG作为链接:before伪元素content内容不生效问题求助

问题原因及修复方案 #

核心失效原因 #

• 引号嵌套冲突：CSS中content的url()使用双引号包裹整个SVG字符串，但SVG内部的属性（比如id="Layer_1"）也使用了双引号，导致字符串被提前截断，浏览器无法识别完整的SVG代码。
• Data URI特殊字符未处理：直接在data:image/svg+xml中嵌入未转义的特殊字符（包括多余空格、引号、#等）会导致SVG解析失败。
• 可选补充：部分浏览器需要为伪元素明确设置宽高，否则可能按默认尺寸渲染过小甚至不可见。

修复后的可用代码 #

将SVG内部的双引号全部替换为单引号，同时删除SVG字符串前多余的空格即可正常使用，也可额外设置伪元素的宽高调整图标尺寸：

a:link::before {
  content: url("data:image/svg+xml;charset=UTF-8,<svg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 81.54 64.81'><defs><style>.cls-1{fill:blue;}</style></defs><polygon class='cls-1' points='49.17 0 44.56 4.61 69.12 29.17 0 29.17 0 35.7 68.99 35.7 44.49 60.2 49.1 64.81 76.93 36.98 81.54 32.37 49.17 0'/></svg>");
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 4px; /* 可按需增加和文字的间距 */
}

如果需要更稳妥的兼容性，也可以将整个SVG代码转换为Base64编码后再放入url()中，完全避免特殊字符解析问题。

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