伪元素块 link 问题

Question

我使用 :before 伪元素为我的导航创建了底部边框悬停动画 links:

a {
  display: inline-block;
  padding: 20px 0px;
  margin: 0px 10px;
  position: relative;
  font-weight: bold;
  font-family: Montserrat;
  cursor: pointer;
  background-color: #f5f5f5;
}

a:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 0px;
  border-bottom: 2px solid black;
  bottom: 12px;
  transform-origin: bottom left;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: transform: 0.2s ease-out;
}

a:hover:before {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>

上面的可运行代码没有这个问题，但在我的网站上，伪元素的 2 px 粗边框阻塞了菜单 link 并将光标更改为默认箭头。如果用户误点击了底部边框，菜单 link 将不起作用，这会造成混乱。每次你悬停在边界上时，光标都会快速变化，这使得导航菜单看起来有问题。

这里是屏幕录像：https://streamable.com/gk9yir

我该如何解决这个问题？

Answer 1

改为使用框阴影：

a {
  display: inline-block;
  padding: 20px 0px;
  margin: 0px 10px;
  position: relative;
  font-weight: bold;
  font-family: Montserrat;
  cursor: pointer;
  background-color: #f5f5f5;
}

a:before {
  content: '';
  position: absolute;
  margin-left:1px;
  width: calc(100% - 2px);
  height: 0px;
  box-shadow:0 0 0 1px #000;
  bottom: 12px;
  transform-origin: bottom left;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: transform: 0.2s ease-out;
}

a:hover:before {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>

这应该可以解决问题，因为阴影不会占用鼠标焦点。

Answer 2

只忽略伪元素处的指针

a:before {pointer-events:none;...

伪元素块 link 问题

Pseudo-element blocks link issue

html

css

navigation

menu

pseudo-element