Question

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

这是基本的CSS：

＆＃13;

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;
}

＆＃13;

<a>hello</a>

＆＃13;

的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>

::在Chrome Mobile上没有出现伪元素之后

1 个答案: