Windows版Edge浏览器为链接前置箭头添加错误背景色求助

针对你遇到的Windows版Edge里::before伪元素箭头显示错误背景色的问题，可尝试以下几种解决方案：

方案1：显式重置伪元素背景与颜色属性 #

给伪元素添加背景色和颜色的显式声明，避免浏览器默认样式干扰：

div.entry-content p a::before {
    content: "\2197";
    padding-right: 2px;
    background-color: transparent; /* 强制背景透明 */
    color: inherit; /* 继承链接文字颜色 */
    display: inline; /* 确保行内渲染 */
}

如果链接所在区域有特定背景色，可将transparent替换为对应背景色值（如#ffffff）。

方案2：改用SVG图标替代Unicode字符 #

Unicode字符在不同浏览器/系统的渲染可能存在差异，改用SVG图标能更好保证一致性：

div.entry-content p a::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24"><path fill="currentColor" d="M18 13v6h-2v-4H8v-2h8V7l6 6z"/></svg>');
    padding-right: 2px;
    vertical-align: middle; /* 对齐图标与文字 */
}

currentColor会自动继承链接的文字颜色，无需额外设置颜色值。

方案3：调整伪元素的字体与布局属性 #

部分情况下，Windows Edge对特定字体的Unicode字符渲染异常，可指定兼容字体并调整布局：

div.entry-content p a::before {
    content: "\2197";
    padding-right: 2px;
    font-family: 'Segoe UI', Roboto, sans-serif; /* 指定系统兼容字体 */
    vertical-align: baseline; /* 对齐基线 */
    line-height: 1; /* 重置行高 */
}

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