文字如何在鼠标移上去的时候加下划线

网站建设最近在此博客中添加了一个简单的视觉效果，我很快就爱上了它：当您将博客标题悬停时，会通过从中心进行动画显示来显示链接的下划线。您可以在上面的横幅广告中尝试。创建这种效果非常容易，不需要通过HTML添加任何其他DOM元素，并且对于不支持CSS动画的浏览器来说效果很好（它会显示为常规下划线）。

我们需要做的第一件事是关闭text-decoration，并将链接设置position为relative。为简单起见，我们还要确保链接不会在悬停时更改颜色。在这里，我们将效果应用于h2s中的所有链接元素：

h2 > a {
  position: relative;
  color: #000;
  text-decoration: none;
}

h2 > a:hover {
  color: #000;
}

接下来，我们要添加边框，并通过转换将其隐藏。为此，我们将其插入:before，并将其X缩放比例设置为0。作为后备，我们将其隐藏visibility: hidden在不支持CSS动画的浏览器中。

h2 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

在最底部，我们告诉元素以0.3秒为单位对应用到它的所有更改进行动画处理。为了使动画出现，现在我们只需要使该元素在上再次可见hover，并将其X比例设置回1：

h2 > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

就是这样！从16.0版开始（一年多），Firefox就支持animation和transform不支持moz前缀，因此我在代码中省略了前缀。为了安全起见，应将和添加到所有动画和变换中。-o-moz