CSS 悬停时从左到右出现和消失的下划线

在本文中，我们将介绍如何在CSS中创建一个悬停时从左到右出现和消失的下划线效果。这个效果可以为网页添加一些动态和生动的特点，吸引用户的注意力。

阅读更多：CSS 教程

创建基本结构

首先，我们需要创建一个HTML文件来容纳我们的CSS代码和演示效果。在HTML文件中，我们创建一个包含文本的元素，通过悬停触发下划线效果。

<!DOCTYPE html>
<html>
<head>
  <title>CSS悬停下划线效果</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>悬停下划线效果</h1>
  <p>悬停在这段文本上，将出现从左到右的下划线效果。</p>
</body>
</html>

编写CSS样式

接下来，我们需要在样式表中编写CSS代码，实现悬停时从左到右出现和消失的下划线效果。

p {
  position: relative; /* 设置元素为相对定位，为伪元素提供定位上下文 */
  display: inline-block; /* 让元素包裹文本内容，以实现文字下划线 */
}

p:before {
  content: ""; /* 生成一个伪元素 */
  position: absolute; /* 设置伪元素为绝对定位，相对于包含块 */
  left: 0; /* 将伪元素的左边距设置为0，以实现从左到右的运动效果 */
  width: 0; /* 将伪元素的宽度设置为0，初始时不可见 */
  height: 2px; /* 设置伪元素的高度为2像素，作为下划线的宽度 */
  background-color: black; /* 设置下划线的颜色为黑色 */
  transition: width 0.3s; /* 使用过渡动画实现从0到100%宽度的效果 */
}

p:hover:before {
  width: 100%; /* 悬停时将伪元素的宽度设置为100%，显示完整的下划线 */
}