Question

我正在使用伪元素:: before和:: after来强调我的about页面上的文字：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指数。将它们更改为0，它将按预期工作。

伪元素在移动设备上消失

1 个答案: