css 内容字符渲染奇怪

Question

我正在使用 :after 伪元素在列表中的每个项目旁边添加一个字符。我目前使用的 CSS 是：

li:after {
      display: inline-block;
      content: 'b6';
      color: #dc313a;
      padding-right: 16px;
      padding-left: 6px;
      font-weight: normal;
}

它在 Chrome（大部分时间）、Firefox 和 IE11 中显示良好。这是它应该添加到每个 li 元素末尾的内容：

在 Chrome 中有时会显示此并按 F5 将修复它。

在 Edge 中，它在某些计算机上显示此

有谁知道为什么我有时会在 Chrome 中看到这些字符以及为什么 Edge 在某些计算机上显示的内容完全不同？

Answer 1

尽管很多网站都说字符 25b6 在所有浏览器中的工作方式并不相同。在 Windows 中的字符映射表中查找 Ariel 字体后，我发现 25ba 也给出了相同的字符（非常接近）。用 25ba 而不是 25b6 更新我的 css 后，它在我可以测试的所有浏览器中都能正确显示。

似乎 25b6 edge 只是将其更改为表情符号，甚至在它不会阻止 edge 更改它之后添加 fe0e。

css 内容字符渲染奇怪

css content character rendering strange

html

css

pseudo-element