Android内容上的CSS错误：“B”不起作用，内容：“A”确实有效。这是怎么回事？

Question

我有一个包含“脚注”的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";
 }

当脚注内容为字母A或脚注内容为字母C时，此功能完美。脚注内容为字母B时出现问题。

问题是在Android设备（模拟和硬件）上，B不可见。 A是可见的。 C是可见的。但不是B.如果我在B的​​开头添加一个空格，它就会变得可见。除了Android之外的所有东西，B在使用Ripple的桌面模拟中完全可见，它显示得很好。

所以这些都有效：

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

  .hasfootnote.B:after {
   content: "This Is Footnote B";
  }   

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

但这不起作用：

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

有谁知道为什么会这样，或者有任何建议的解决办法？