css3+伪元素实现鼠标移入时下划线向两边展开的效

1. 引言

在前端开发中，我们经常会遇到需要添加鼠标悬停效果的场景。而其中一种常见的效果就是鼠标移入时，下划线从中间向两边展开的效果。本文将介绍如何使用CSS3和伪元素来实现这个效果。

2. 实现思路

要实现下划线从中间向两边展开的效果，我们可以利用伪元素:before和:after来创建两个块，并使用CSS3的过渡效果实现动画效果。

2.1 创建伪元素

首先，我们需要创建一个带有下划线的文本，并利用伪元素来添加两个块。

.container {
  position: relative;
}
.container::before,
.container::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #000;
  transition: width 0.3s ease;
}
.container::before {
  left: 50%;
}
.container::after {
  right: 50%
}

在这段代码中，我们使用了.container作为父容器，并为其创建了两个伪元素。伪元素::before位于文本的左侧，而伪元素::after位于文本的右侧。这两个伪元素都具有高度为2px的黑色背景，初始宽度设置为0。

2.2 实现动画效果

接下来，我们需要为伪元素添加鼠标悬停时的动画效果。当鼠标移入时，我们将伪元素的宽度从0逐渐增加到50%。由于我们使用了过渡效果，因此宽度的变化会产生一个平滑的动画效果。

.container:hover::before,
.container:hover::after {
  width: 50%;
}

在这段代码中，我们使用了.container:hover来选择鼠标悬停时的状态，并将宽度设置为50%。

3. 使用示例

现在，我们可以将上述代码应用到实际的HTML页面中，以实现鼠标移入时下划线向两边展开的效果。

<div class="container">
  鼠标移入时下划线展开效果
</div>

在这段代码中，我们使用了一个包含文本的<div>元素，并为其添加了.container类名，以应用上述样式。

4. 结论

通过CSS3和伪元素，我们可以很容易地实现鼠标移入时下划线向两边展开的效果。这种效果不仅可以增加页面的动感和交互性，还能提升用户体验。希望本文对你在前端开发中实现鼠标悬停效果有所帮助。

5. 参考文献

1. CSS3 Transition：https://www.w3schools.com/css/css3_transitions.asp

2. CSS3 Pseudo-Elements：https://www.w3schools.com/css/css_pseudo_elements.asp