underline css animation

1a:hover {
2  text-decoration: underline;
3}

1.hover-underline-animation {
2  display: inline-block;
3  position: relative;
4  color: #0087ca;
5}
6
7.hover-underline-animation:after {
8  content: '';
9  position: absolute;
10  width: 100%;
11  transform: scaleX(0);
12  height: 2px;
13  bottom: 0;
14  left: 0;
15  background-color: #0087ca;
16  transform-origin: bottom right;
17  transition: transform 0.25s ease-out;
18}
19
20.hover-underline-animation:hover:after {
21  transform: scaleX(1);
22  transform-origin: bottom left;
23}

1#sec {
2  display: inline-block;
3  position: relative;
4  padding-bottom: 3px;
5}
6#sec:after {
7  content: '';
8  display: block;
9  margin: auto;
10  height: 3px;
11  width: 0px;
12  background: transparent;
13  transition: width .5s ease, background-color .5s ease;
14}
15#sec:hover:after {
16  width: 100%;
17  background: blue;
18}

1
2a.middle
3{
4    position: relative;
5}
6
7a.middle:before {
8  content: "";
9  position: absolute;
10  width: 100%;
11  height: 2px;
12  bottom: 0;
13  left: 0;
14  background-color: #FFF;
15  visibility: hidden;
16  transform: scaleX(0);
17  transition: all 0.3s ease-in-out;
18}
19