滑鼠移動到標題時,出現從中心向兩邊水平擴充套件的下劃線
阿新 • • 發佈：2018-11-02
<!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>