CSS 伪元素::标记在手机 (IOS) 上不可见

Question

我正在创建一个静态网站，我正在使用标记的伪元素来使用 Font Awesome 图标更改列表项图标，并且我在 github Pages 上托管该网站。

当我使用笔记本电脑查看页面时，我能够看到列表项图标；当我使用切换设备工具栏并在笔记本电脑上的 Chrome 中选择手机屏幕时，我能够查看正确的结果。但是当我在我的 IOS 设备上查看它时，我看不到预期的结果。我无法调试该问题。谁能帮我指出错误。

这里是实现列表项图标的代码片段。它在笔记本电脑屏幕上运行得非常好。

.className ul li::marker{
      color:var(--heading);
      font-size:20px;
      content: "\f064";
      font-family: 'Font Awesome 6 Free';
      font-weight: 700;
      justify-content: center;
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<div class="className">
<ul>
<li> First</li>
<li> Second</li>
<li> Third</li>
</ul>

</div>

现在，当我在手机上查看它时，它会显示为圆圈而不是箭头。

现在这在笔记本电脑浏览器中工作正常，但在 IOS 设备上则不行。

Answer 1

编辑：

看看把双冒号改成单冒号是否可以治愈。旧版 Safari 仅支持伪元素选择器中的单个冒号。

此外，Safari 对

marker

的支持仅限于

color

和

font-size

：https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

Answer 2

Safari 不支持标记的

content

属性。因此，将该内容值添加到

list-style-type

元素

的 

<ul>

https://github.com/webcompat/web-bugs/issues/137820#issuecomment-2165560878