1. 程式人生 > >滑鼠移動到標題時,出現從中心向兩邊水平擴充套件的下劃線

滑鼠移動到標題時,出現從中心向兩邊水平擴充套件的下劃線

<!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>