本日给大家分享一个小demo，是关于如何动画实现文本下划线的。

下划线的动画实现紧张是运用了两个css知识点：

htmlcss下划线CSS 下划线动画轻松实现下划线动画 jQuery

background属性的渐变，渐变过渡实在是背景图的实现，利用背景图的定位即可实现下划线须要合营行盒子才能实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>下划线动画</title> <style> h2 span{ background: linear-gradient(to right, #000, #000) no-repeat right bottom; background-size: 0px 2px; transition: background-size 1s ease; cursor: pointer; } h2 span:hover{ background-position: left bottom; background-size: 100% 2px; } </style></head><body> <h2> <span> 如何实现文本下划线动画呢？如何实现文本下划线动画呢？如何实现文本下划线动画呢？如何实现文本下划线动画呢？ </span> </h2></body></html>