console 命令行工具 X clear
console
<!DOCTYPE html>
<html>	
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
*{
    margin: 0;
    padding: 0
}
.father{
    position: relative;
    margin: 100px auto;
    width: 50px;
    text-align: center
    /* border: 1px solid #ccc; */
    /* animation: animate 2s linear infinite */
}
.father:after{
    content: "";
    position: absolute;
    display: block;
    top: 30px;
    left: 50%;
    width: 0;
    height: 0;
    transition: all 0.8s;
    background-color: blue;
}
.father:after{
    transform: translateX(-50%); 
}
.father:hover{
    /* height: 2px */
}
.father:hover:after{
    width: 30px;
    height: 2px;
}
</style>
</head>
<body>

<div class="father">
    首页
</div>


</body>
</html>