Question

我正在尝试将linear-gradient border-bottom hover <a>应用于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; }，但它不起作用100％我的目标是使用和 CSS 。

这是我的代码：

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

border-bottom

正如您所看到的，center不在width中，并且不适合<a> width的{{1}}。

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）。

Answer 2

您也可以linear-gradient将其添加为background-image来执行此操作。为此，背景图像应位于元素的中心 - 底部，其大小最初应设置为X轴的0%。悬停时，尺寸应在X轴上转换为100%。 Y轴的渐变尺寸是边框的粗细。

在此方法中，您不需要任何额外元素，但浏览器对渐变的支持低于对框阴影的支持。线性渐变仅适用于IE10 +。

a {
  display: inline-block;
  padding-right: 3%;
  padding-bottom: 3%;
  color: #666;
  font-size: 30px;
  text-decoration: none;
  cursor: pointer;
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);  
  background-image: linear-gradient(to right, #f0f0f0, #8c8b8b, #f0f0f0);
  background-position: 50% 100%;
  background-size: 0% 4px;
  background-repeat: no-repeat;
  transition: all 0.5s linear;
}
a:hover {
  background-size: 100% 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>
  <a href="#">First</a> 
  <a href="#">Second</a> 
  <a href="#">This is the third</a> 
</div>

正如Can I Use - Notes中所述，Safari不支持线性渐变的to [side]语法，因此为Safari支持添加以下行。

background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);

_{（根据浏览器版本，不要忘记添加-webkit-transition。）}

悬停时线性渐变底部边框

2 个答案: