html - 页脚上的箭头链接不起作用

Question

我的页脚上有一个箭头(一个标签)，带有一些 :after 和 :before CSS 定制，但我无法让它正常工作。它只能在某些部分点击，而不是整个箭头，我 100% 确定这是因为 :after 和 :before 选择器。

body {
  margin-top: 40px;
}
footer {
  background-color: #239bd2;
  position: relative;
}
footer:before,
footer:after,
footer > .arrow {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -20px;
  border: 20px solid transparent;
  border-bottom-color: #239bd2;
}
footer:after {
  margin-left: -8px;
  border-width: 8px;
}
footer > .arrow {
  margin-left: -11px;
  border-width: 11px;
  border-bottom-color: #fff;
}

<footer>
  <a href="#" class="arrow"></a>
  <div class="wrap">
    <ul class="nav navbar-nav">
      <li><a href="#">Mentions légales</a>
      </li>
      <li><a href="#">CGV</a>
      </li>
      <li><a href="#">Livraison</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
      <li><a href="#">Engagement Qualité</a>
      </li>
    </ul>
  </div>
</footer>

有什么方法可以更改我的代码以使点击效果正确地用于 a 标签？

可以查到直播网站here .

Answer 1

我不确定您拥有的是否是最佳设置，但是是的，:before 和 :after 会“妨碍”点击。

尝试:

footer:before, footer:after{
  pointer-events: none;
}