.link{ color: #2db0d1; font-family: 'Tektur', cursive; font-size: 24px; font-weight: 500; line-height: 20px; text-transform: capitalize; display: inline-block; position: relative; z-index: 1; transition: all 0.3s ease 0s; } .link:focus, .link:hover{ color: #2db0d1; } .link:before{ content: attr(data-hover); color: #d6225e; width: 100%; height: 100%; text-shadow: 0 0 1px rgba(255, 255, 255, 0.3); visibility: hidden; opacity: 0; transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); position: absolute; transition: all 0.3s ease 0s; } .link:hover:before{ visibility: visible; opacity: 0.5; transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); } @media only screen and (max-width: 767px){ .link{ margin-bottom: 30px; } }