伪元素块链接问题答案

【问题标题】：Pseudo-element blocks link issue伪元素块链接问题
【发布时间】：2021-03-16 13:09:40
【问题描述】：

我使用:before 伪元素为我的导航链接创建了一个底部边框悬停动画：

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 粗边框阻止了菜单链接并将光标更改为默认箭头。如果用户误点击底部边框，菜单链接将不起作用，从而造成混乱。而且每次你将鼠标悬停在边框上时，光标都会快速变化，这使得导航菜单看起来有问题。

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

我该如何解决这个问题？

【问题讨论】：

标签： html css menu navigation pseudo-element

【解决方案1】：

忽略伪元素处的指针

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

【讨论】：

【解决方案2】：

使用 box-shadow 代替：

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>

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

【讨论】：