文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS伪元素：：移动电话上不可见的标记(IOS)

问CSS伪元素：：移动电话上不可见的标记(IOS)
EN

Stack Overflow用户

提问于 2022-07-24 18:02:09

回答 1查看 300关注 0票数 1

我正在创建一个静态的网站，我使用一个伪元素的标记来改变列表项目图标使用字型可怕的图标，我是托管网站上的github页面。

当我使用笔记本电脑查看页面时，当我使用Toggle设备工具栏并在笔记本电脑上选择一个手机屏幕时，我能够看到列表项图标，我能够看到正确的结果。但是当我在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设备上就不行了。

html

css

font-awesome

listitem

回答 1

Stack Overflow用户

发布于 2022-07-26 09:44:06

编辑：

看看把双冒号改为单个冒号是否能治愈它。旧的Safaris只支持伪元素选择器中的单个冒号。

另外，Safari对marker的支持仅限于color和font-size：https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73100851

复制

相似问题

问CSS伪元素：：移动电话上不可见的标记(IOS)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS伪元素：：移动电话上不可见的标记(IOS)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS伪元素：：移动电话上不可见的标记(IOS)
EN