::after 伪元素未出现在 Chrome 移动设备上

Question

非常简单但奇怪的错误，我有一个伪元素，它在桌面浏览器上看起来很好，但在移动 Chrome 上消失了（不确定 iOS，没有 iPhone 可以测试）

这是基本的 CSS：

a {
  text-decoration: none;
  display: inline-block;
  color: #000;
  overflow: visible;
}

a::after {
  content: '';
  display: block;
  height: 8px;
  width: 98%;
  background: #8BC8F690;
  margin-top: -9px;
  margin-left: 2px;
}

<a>hello</a>

jsfiddle: https://jsfiddle.net/w4d1jteb/

Answer 1

检查您的background。这不是一个有效值。它有 8 个字符长，但只能有 6 个。

a {
  text-decoration: none;
  display: inline-block;
  color: #000;
  overflow: visible;
}

a::after {
  content: '';
  display: block;
  height: 8px;
  width: 98%;
  background: #8BC8F690; <-- This is not valid. *1*2
  margin-top: -9px;
  margin-left: 2px;
}

*1: 你可以试试background-color: rgba(139, 200, 246, 0.565)。

*2：或者直接使用#8BC8F6。

请参阅以下示例：

a {
  text-decoration: none;
  display: inline-block;
  color: #000;
  overflow: visible;
}

a::after {
  content: '';
  display: block;
  height: 8px;
  width: 98%;
  background-color: rgba(139, 200, 246, 0.565);
  margin-top: -9px;
  margin-left: 2px;
}

#test {
  text-decoration: none;
  display: inline-block;
  color: #000;
  overflow: visible;
}

#test::after {
  content: '';
  display: block;
  height: 8px;
  width: 98%;
  background: #8BC8F6;
  margin-top: -9px;
  margin-left: 2px;
}

<a>hello</a>

<a id="test">hello2</a>