实现鼠标悬停父元素时文本下划线动画-html教程-PHP中文网

实现鼠标悬停父元素时文本下划线动画

聖光之護

发布： 2025-08-16 18:42:12

原创

786人浏览过

实现鼠标悬停父元素时文本下划线动画

本文介绍了如何通过CSS实现鼠标悬停在父元素上时，子元素文本出现下划线动画的效果。核心思路是利用CSS伪元素::before或::after创建一个下划线，并通过transition属性实现动画效果。通过控制伪元素的width和visibility属性，可以在鼠标悬停时动态显示下划线，从而达到美观的视觉效果。

实现原理

该效果的核心在于利用CSS的伪元素（::before 或 ::after）来模拟下划线，并利用 transition 属性来实现动画效果。默认情况下，伪元素的宽度设置为0，并且隐藏。当鼠标悬停在父元素上时，伪元素的宽度变为100%，并且显示出来，从而产生下划线动画。

实现步骤

HTML 结构：

首先，需要一个包含文本的 HTML 结构。通常，会将文本包裹在一个 <a> 标签或者 <span> 标签内，并将其放置在一个父级容器内。例如：
```
<div class="newsBox">
  <div class="titleBox">
    <a class="newsTitle" id="newsTitle">News</a>
  </div>
</div>
```
登录后复制
CSS 样式：

接下来，需要编写 CSS 样式来创建下划线动画。关键步骤如下：
- 设置父元素样式（可选）： 可以根据需要设置父元素的样式，例如背景颜色、内边距等。
- 设置文本样式： 设置文本的字体大小、颜色、字体样式等。
  
  ViiTor实时翻译
  AI实时多语言翻译专家！强大的语音识别、AR翻译功能。
  
  116
  
  查看详情
- 创建伪元素： 使用 ::before 或 ::after 伪元素来创建下划线。设置伪元素的 content 为空字符串，position 为 absolute，并设置 bottom 和 left 属性来定位下划线的位置。设置 background-color 来定义下划线的颜色。
- 设置初始状态： 设置伪元素的初始宽度为 0，并设置 visibility 为 hidden，使其默认情况下不显示。
- 添加过渡效果： 使用 transition 属性来为伪元素的宽度和可见性添加过渡效果，使其在鼠标悬停时产生动画效果。
- 设置悬停状态： 使用 :hover 伪类来设置鼠标悬停时的样式。将伪元素的宽度设置为 100%，并将 visibility 设置为 visible，使其显示出来。
完整的 CSS 代码如下：
```
.newsBox {
 padding-top: 5%;
 padding-bottom: 5%;
 background-color: rgba(154, 54, 67, 0.5);
}

.titleBox {
  margin-left: 20px;
}

  .newsTitle {
    position: relative;
    font-size: 30px;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
   }

  .newsTitle::before {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: red;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
   }

.newsBox:hover .newsTitle::before {
   visibility: visible;
   width: 100%;
}
```
登录后复制
或者，如果想悬停在 .titleBox 上触发动画，则修改 CSS 如下：
```
.titleBox:hover .newsTitle::before {
   visibility: visible;
   width: 100%;
}
```
登录后复制

注意事项

position: relative： 确保文本元素（例如 <a> 或 <span>）的 position 属性设置为 relative，这样伪元素才能相对于文本元素进行定位。
transition 属性： transition 属性可以控制动画的速度和效果。可以根据需要调整 transition 的值，例如 transition: width 0.3s ease-in-out;。
兼容性： 该方法在现代浏览器中具有良好的兼容性。