<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.