.link{ color: transparent; font-family: 'Lato', sans-serif; font-size: 22px; font-weight: 700; line-height: 31px; text-transform: capitalize; border: none; display: inline-block; position: relative; z-index: 1; transition: all .3s ease-out; } .link:hover, .link:focus{ color: #007aff; } .link:before{ content: attr( data-content); color: #555; width: 100%; height: 100%; border-bottom: 3px dashed #555; overflow: hidden; position: absolute; top: 0; left: 0; transition: all .1s ease-out; } .link:hover:before{ border-color: #007aff; animation:scan 0.5s linear infinite alternate; } @keyframes scan{ 0% { height:100% } 100% {height: 18% } } @media only screen and (max-width: 767px){ .link{ margin-bottom: 30px; } }