<div class="example"></div>.example {
width: 300px;
height: 50px;
margin: 50px auto;
background: yellow;
cursor: pointer;
position: relative;
}
.example:before {
content: '';
display: block;
width: 0;
height: 5px;
background: red;
position: absolute;
left: 50%;
bottom: 0;
transition: .5s;
}
.example:hover:before {
width: 100%;
left: 0;
}
a{
//...
}
a:after{
width:0;
content:"";
border-bottom: 1px solid #000;
transition: all .3s ease;
//...
}
a:hover:after{
width: //...
}
