#PostSourceCode
<p>Hover <a href="#" id="style-2" data-replace="this link"><span>this link</span></a></p>
<style>
a {
overflow: hidden;
position: relative;
display: inline-block;
}

a::before,
a::after {
content: '';
position: absolute;
width: 100%;
left: 0;
}
a::before {
background-color: #3cbcc3;
height: 2px;
bottom: 0;
transform-origin: 100% 50%;
transform: scaleX(0);
transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}
a::after {
content: attr(data-replace);
height: 100%;
top: 0;
transform-origin: 100% 50%;
transform: translate3d(200%, 0, 0);
transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
color: #3cbcc3;
}

a:hover::before {
transform-origin: 0% 50%;
transform: scaleX(1);
}
a:hover::after {
transform: translate3d(0, 0, 0);
}

a span {
display: inline-block;
transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}

a:hover span {
transform: translate3d(-200%, 0, 0);
}

/* Presentational Styles */
body {
background-color:#f7f4e9;
display: grid;
font-family: 'Montserrat', sans-serif;
font-weight : 900;
font-size: 72px;
line-height: 1.5;
height: 100vh;
place-items: center;
color: #1d1d2c;
}

a {
text-decoration: none;
color: #18272F;
font-weight: 700;
vertical-align: top;
}
</style>