Android上的CSS错误-内容：“B”不起作用，内容：“A”起作用。发生什么事？

我有一个包含脚注的Phonegap应用程序——当一个元素有一个类hasfootnote时，我在伪元素后面插入一个：来创建一个指示脚注的图标。悬停时，该元素显示脚注的文本：

 <li class="hasfootnote A">This list item has a footnote</li>

 .hasfootnote:after {
   background: #000;
   color: #FFF;
   border-radius: 12px;
   padding: 3px 6px;
  }

.hasfootnote.A:after {
    content: "A";
 }   

.hasfootnote.A:hover:after {
    content: "A: This is the text that is revealed when the footnote is hovered";
 }

但这不起作用：

  .hasfootnote.B:after {
  content: "B";
 }   

---

有人知道这可能是什么原因吗，或者有什么解决办法可以建议吗？

您真的不应该使用伪元素来注入实际内容。这不是他们的目的。不能复制：我感谢你为它设置了一个代码笔。然而，这个问题只在Android设备上查看的已编译PhoneGap应用程序上可见，而在桌面浏览器上看不到，这就是为什么它如此神秘的原因之一。你使用的是图标字体吗。可能“b”已损坏或未映射。在任何情况下，正如我所说，您都不应该使用伪元素来保存实际内容。你最好这样做：

  .hasfootnote.B:after {
  content: "B";
 }