android - 伪元素 :after disapears on chrome mobile

我有一个带有导航元素的页面，我希望将其隐藏在页面的左侧/右侧，并在我悬停图标时显示。我在要隐藏的元素上使用 :after 伪元素创建了图标。该解决方案在经过测试的桌面浏览器上运行良好，但在 chrome 移动设备上失败(即使桌面版本运行良好)。

我在 iOS 和 Android 上都进行了测试，没有一个能够显示 :after 伪元素。 但是如果你碰巧点击了 :after 应该在的位置，菜单就会显示出来。所以看起来这只是一个显示问题。

我创建了this jsfiddle显示问题。我添加了一些 javascript 只是因为它在真实页面上，但我认为这不是问题的原因。

更奇怪的是，在 iOS 上，chrome 和 safari 都可以在 jsfiddle 上显示 M 和 S 却无法在真实页面上显示图标。不过，Android 上的 Chrome 也无法在 jsfiddle 上显示元素。

那么，我的问题是，如何在 Chrome 移动或 iOS 浏览器上显示 :after 伪元素？

---

Best Answer-推荐答案

不确定移动浏览器发生了什么，但似乎从 header nav 和 header side 中删除 overflow-y: auto;工作。

但是，如果您确实需要滚动条，您可以在

中添加另一个元素(即

)。

header nav ul {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  padding: 0;
  margin: 0;
  overflow-y: auto;
}

见 updated jsFiddle 。

关于android - 伪元素 :after disapears on chrome mobile，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35105527/