.link{ color: transparent; font-family: 'Lexend', sans-serif; font-size: 21px; font-weight: 500; line-height: 20px; text-transform: capitalize; padding: 0 10px; letter-spacing: 1px; display: inline-block; position: relative; overflow: hidden; z-index: 1; transition: all 0.3s ease; } .link:focus, .link:hover{ color: #950808; } .link span{ color:#000; display: block; transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); } .link:hover span{ color: #950808; transform: translateY(-100%); } .link:before{ content: attr(data-hover); padding: 0 10px; position: absolute; top: 100%; left: 0; right: 0; transition: top 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); } .link:hover:before{ top: 0; } @media only screen and (max-width: 767px){ .link{ margin-bottom: 30px; } }