<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
.title{
width:500px;
height:200px;
margin:0 auto;
text-align:center;
line-height:200px;
position: relative;
}
.titleLine{
width:0;
height:2px;
background:#000;
transition:width 1s linear;
position:absolute;
margin:0 auto;
top:150px;
left:0;
right:0;
}
.title:hover .titleLine{
width:200px;
}
</style>
</head>
<body>
<div class="title">
<h3>这里标题内容</h3>
<p class="titleLine"></p>
</div>
</body>
</html>
鼠标移动到标题时,出现从中心向两边水平扩展的下划线
猜你喜欢
转载自blog.csdn.net/sunjynyue/article/details/83013351
今日推荐
周排行