html+css的hover让文字下方横线从中间向两边逐渐显示

最新推荐文章于 2023-03-25 12:34:57 发布

AllenFlyer

最新推荐文章于 2023-03-25 12:34:57 发布

阅读量1.6k

点赞数 2

分类专栏： JAVA 文章标签： css html html5 css3 javascript

本文链接：https://blog.csdn.net/qq_49707237/article/details/107728309

版权

JAVA 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

通过伪类after，hover移入后改变after宽度从而实现效果
实现代码如下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#w_y_nav{
				height: 100px;
				width: 100%;
				list-style: none;
				cursor: pointer;
				overflow: hidden;
				background: #000000;
				position: relative;
				
			}
			#w_y_nav>li{
				float: left;
				width: 150px;
				height: 58px;
				text-align: center;
				line-height: 58px;
				position: relative;
				top: 50%;
				margin-top: -29px;
				margin-left: 50px;
				color: white;
			}
			#w_y_nav>li:nth-of-type(1){
				margin-left: 300px;
			}
			#w_y_nav>li:after{
				content: "";
				width: 0;
				height: 3px;
				position: absolute;
				background: white;
				top: 100%;
				right: 50%;
				transition: all .5s;
			}
			#w_y_nav>li:hover:after{
				width: 100%;
				right:0;
				
			}
		</style>
	</head>
	<body>
		<ul id="w_y_nav">
			<li>我要寄件</li>
			<li>运单追踪</li>
			<li>服务支持</li>
		</ul>
	</body>
</html>