伪元素在移动端消失

Question

我正在使用伪元素 ::before 和 ::after 在我的关于页面上为文本添加下划线：http://www.alexanderschlosser.de/wordpress/about.

出于某种奇怪的原因，一切都在桌面上运行良好，但无论我在 iPhone 上使用什么移动浏览器，它都不会显示下划线。或者他们实际上出现了一秒钟，但随后就消失了。

更奇怪的是，我对主导航使用了完全相同的 CSS 样式，而且它在所有设备上都可以很好地工作。

知道问题出在哪里吗？

_

这是CSS

.linkBio::before {
  content: "";
  position: absolute !important;
  z-index: -1 !important;
  width: 100%;
  height: 1px;
  bottom: -1px;
  left: 0;
  background-color: #252526;
}

/*CREATE COLORED BACKGROUND AND HIDE IT*/
.linkBio::after {
  content: "";
  position: absolute !important;
  z-index: -2 !important;
  width: 100%;
  height: 100%;
  bottom: 0px;
  left: 0;
  background-color: #DFFAD6;
  visibility: hidden;
  /*opacity: 0;
  -webkit-transition: all 0.05s ease-in-out 0s;
  transition: all 0.05s ease-in-out 0s;*/
}

/*SHOW COLORED BACKGROUND ON HOVER*/
.linkBio:hover::after {
  visibility: visible;
  /*opacity: 1;*/
}

Answer 1

这是您为他们设置的 z-index。将它们更改为 0，它将按预期工作。

伪元素在移动端消失

Pseudo elements disappear on mobile

pseudo-element