<a href="#" data-content="Link Hover">Link Hover</a>
@import url('https://fonts.googleapis.com/css?family=Barlow:800&display=swap');
* {
box-sizing: border-box;
&::before, &::after {
box-sizing: border-box;
}
}
body {
font-family: 'Barlow', sans-serif;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
}
a {
position: relative;
display: inline-block;
font-size: 2em;
color: royalblue;
font-weight: 800;
text-decoration: underline;
// text-decoration: none;
overflow: hidden;
transition: clip-path 275ms ease;
&:hover::before {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
&::before {
position: absolute;
content: attr(data-content);
color: midnightblue;
text-decoration: underline;
clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
transition: clip-path 275ms ease;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.