<div class="wrapper">
<a href="">
<span class="primary">Home</span>
<span class="secondary" aria-hidden="true">Home</span>
</a>
<a href="">
<span class="primary">About</span>
<span class="secondary" aria-hidden="true">About</span>
</a>
<a href="">
<span class="primary">Portfolio</span>
<span class="secondary" aria-hidden="true">Portfolio</span>
</a>
</div>
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
:root {
--black: #191a19;
--white: #fafafa;
--pikachu: #f3cf21;
--serif: "Playfair Display", serif;
--ease: cubic-bezier(0.62, 0.05, 0.01, 0.99);
background-color: var(--black);
font-family: var(--serif);
}
.wrapper {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
gap: clamp(1rem, 3vw, 2rem);
}
a {
position: relative;
color: var(--white);
font-size: clamp(1.5rem, 5vw, 4rem);
text-decoration: none;
padding-bottom: 0.2em;
width: max-content;
line-height: 1;
// border: 1px solid red;
span {
display: inline-block; // IMPORTANT
white-space: nowrap;
transition: all 350ms ease-out;
transform-origin: center center;
transform-style: preserve-3d;
}
.primary {
position: relative;
}
.secondary {
position: absolute;
transform: translateY(0.5em) rotateX(90deg);
left: 0;
}
&::before {
content: "";
width: 100%;
height: 0.075em;
background-color: var(--pikachu);
position: absolute;
bottom: 0em;
transform: scaleX(0);
transition: all 350ms ease-out;
transform-origin: left center;
}
&:hover {
.primary {
transform: translateY(-0.5em) rotateX(90deg);
}
.secondary {
transform: translateY(0em);
}
&::before {
transform: scaleX(1);
transition-delay: 200ms;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.