html - 链接与 iOS 中的伪元素双击问题

Question

我想在 anchor 链接下方实现滚动线的效果以满足客户简报 - 我愚蠢地想象一点 CSS3 可以轻松实现这一点而没有任何麻烦，所以我按照以下行设置了一些东西代码，由于一个我不明白的非常烦人的错误，过去一个小时我一直在用头敲 table 。

在桌面上一切正常，但在移动设备上(iOS 和 Android)我在选择链接时遇到问题 - 第一次点击，动画运行，我必须第二次点击才能触发链接 (下面的代码笔也会发生同样的情况)。这让我感到困惑，我想知道是否有人可以为我照亮一切!!？

http://codepen.io/pablodancer/pen/ZLJVOP

li {
  display: inline-block;
  list-style-type: none;
}
li a {
  text-decoration: none;
  position: relative;
  line-height: 1;
  height: auto;
  padding: 0;
  margin-right: 8px;
  padding-bottom: 8px;
  z-index: 1;
}
li a:after {
  display: block;
  left: 0;
  bottom: 0;
  margin-top: 4px;
  width: 0;
  height: 5px;
  background-color: blue;
  content: "";
  z-index: -3;
  transition: width 0.3s;
}
li a:hover:after,
li.active a:after {
  width: 100%;
}

<ul>
  <li class="active"><a href="http:www.nme.com">nme</a></li>
  <li><a href="http:www.bbc,co.uk">bbc</a></li>
  <li><a href="">blah3</a></li>
  <li><a href="">blah4</a></li>
  <li><a href="">blah5</a></li>
</ul>

Answer 1

我相信双击问题只与 iOS 有关。我通常做的是简单地隐藏触摸设备上的伪元素，下面的任何一种方法都可以。

(1) 使用 CSS 媒体查询，适用于 iOS 9+ 和 Android 5+。

@media (hover: none) {
  li a:after {
    display: none;
  }
}

(2) 使用一点 Javascript + CSS:

(function(html) {
  html.className += ('ontouchstart' in window) ? ' touch ' : ' no-touch ';
})(document.documentElement);

---

.touch li a:after {
  display: none;
}

此外，如果你希望保持事件样式，你可以使用选择器li:not(.active) a:after。您可能还想设置 li {vertical-align: top;} 以便元素可以很好地排列。