css - 悬停时的线性渐变底部边框

Question

我正在尝试申请 linear-gradient至 border-bottom在 hover到<a>但它并不是 100% 有效我的目标是尽可能使用 HTML 和 CSS 来实现。

这是我的代码:

a {
  font-size: 30px;
  text-decoration: none;
  color: #666;
  cursor: pointer;
  padding-right: 3%;
  padding-bottom: 3%;
  position: relative;
  display: inline-block;
}
a:after {
  content: '';
  position: absolute;
  left: -50%;
  right: 0%;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-image: -webkit-linear-gradient(left, #f0f0f0, #0a389b, #f0f0f0);
  border-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  border-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  border-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  transition: all 0.5s linear;
  bottom: 0;
  opacity: 0;
}
a:hover:after {
  border-right: 25vh;
  right: 0%;
  opacity: 1;
}

<div>
  <a href="#">First</a> 
  <a href="#">Second</a> 
  <a href="#">This is the third</a> 
</div>

如您所见border-bottom不在 center 中并且不适合 width的 <a> width .

Answer 1

您可以使用此处描述的相同技术:Expand bottom border from center on hover有两个box-shadows在左右边缘创建淡出效果:

a {
  font-size: 30px;
  text-decoration: none;
  color: #666;
  cursor: pointer;
  padding-right: 3%;
  padding-bottom: 3%;
  position: relative;
  display: inline-block;
}
a:after {
  display:block;
  content: '';
  height:4px;
  background:#019fb6;
  transform: scaleX(0.0001);  
  transition: transform 250ms ease-in-out;
  box-shadow: inset -40px 0px 30px -25px #fff, inset 40px 0px 30px -25px #fff;
}
a:hover:after {
  transform: scaleX(1);
}

<div>
  <a href="#">First</a> 
  <a href="#">Second</a> 
  <a href="#">This is the third</a> 
</div>

注意:您需要插入供应商前缀以最大化浏览器支持(请参阅 canIuse)。