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

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


</body>
</html>