css实现动态下划线

最新推荐文章于 2024-06-16 12:02:56 发布

格子衫_

最新推荐文章于 2024-06-16 12:02:56 发布

阅读量265

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_36864724/article/details/131680942

版权

css实现动态下划线

在这里插入图片描述

看到这个效果想了好久，最后决定用背景颜色的形式去实现。

# 代码如下

<h2 class="title">
   <span>一个在脱发路上奋斗的小菜鸡</span>
</h2>
<style>
	.title {
		color: #000;
		line-height: 10px;
	}
	.title span {
		background: linear-gradient(to right, #61c, #ee0a24) no-repeat right bottom;
	    background-size: 0 1px;
	    transition: background-size 0.3s;
	}
	span:hover {
	    background-position-x: left;
	    background-size: 100% 1px;
    }
</style>