无法在 iPad 的 Safari 中为伪选择器前的内容属性分配颜色

Question

.check {
  color: green;
  font-size: 32px;
  
}

.check:before {
  content: "14";
}

    <span class="check"></span>

在 iPad 的 Safari 上打开它：

预计：

实际：

如你所见，:before(✔️)的内容是绿色的。

如果我们运行在 iPad Safari 浏览器上使用相同的代码，(✔️) 仍然是黑色，不会采用 span。

我尝试在 :before 中再次添加颜色，但是，它不起作用：

.check:before {
  content: "14";
  color: green;
}

Answer 1

Safari 移动版存在字体问题，您可以使用 FontAwesome 来修复它。它使用相同的伪造但它有效（因为它的字体）：

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fa-check:before {
    content: "\f00c";
}

Fiddle: https://jsfiddle.net/ydmt80g7/27/

Answer 2

我通过以下方式解决了这个问题：

在 SPAN 中添加 HTML fontawesome 图标
删除 CSS 规则 :before

.check {
  color: green;
  font-size: 32px;
  
}

<script src="https://use.fontawesome.com/c3ef28c600.js"></script>


 <span class="check">
   <i class="fa fa-check"></i>
 </span>

Answer 3

仅供参考：这是我在桌面浏览器和 iOS 上找到的安全图标列表。

为我解决了在 iOS 上显示为类似表情符号的图标的右黑色箭头问题。

https://tutorialzine.com/2014/12/you-dont-need-icons-here-are-100-unicode-symbols-that-you-can-use

无法在 iPad 的 Safari 中为伪选择器前的内容属性分配颜色

Cannot assign color to content attribute in before pseudo selector in Safari of iPad

css

safari

cross-browser

pseudo-element

ipad

在 iPad 的 Safari 上打开它：

预计：

实际：