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

Posted 2023-03-05

【中文标题】::after 伪元素未出现在 Chrome 移动设备上

【英文标题】：::after pseudo-element not appearing on Chrome Mobile

【发布时间】：2018-04-19 11:14:57

【问题描述】：

非常简单但奇怪的错误，我有一个伪元素，它在桌面浏览器上看起来很好，但在移动 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/

【问题讨论】：

您可以使用 chrome 远程调试来调试您的代码，developers.google.com/web/tools/chrome-devtools/…

【参考方案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>

【讨论】：

正确，这是我调试问题时的截图：i.stack.imgur.com/WWJO1.png

哦，谢谢！完全忘记了我正在尝试 alpha 值，但实际上并没有查找它。我的错。