css实现hover多行文字出现下划线

最新推荐文章于 2024-04-13 00:15:00 发布

小伍先生啦

最新推荐文章于 2024-04-13 00:15:00 发布

阅读量916

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_47435082/article/details/129740084

版权

玩转CSS，实现鼠标hover文字文字底部出现渐变线条，效果如下

屏幕录制2023-03-23 21.31.18

利用渐变来实现

<style>
		.title span{
			background: linear-gradient( to right,#ec695c,#61c454) no-repeat right bottom;
			background-size: 0 2px;
			transition: background-size 1300ms;
		}
		.title span:hover{
			cursor: pointer;
			background-position-x: left;
			background-size: 100% 2px;
		}
	</style>
	<body>
		<h2 class="title">
			<span>
				我不认为我会葬身于此，并且我从来没有如此神清气爽，
				我仿佛看到重生，因为从今以后我海波东将不受束缚
			</span>
		</h2>
	</body>