.link{ color: #10a5c2; font-family: 'Quicksand', sans-serif; font-size: 25px; font-weight: 500; line-height: 27px; text-transform: capitalize; letter-spacing: 0.5px; display: inline-block; position: relative; z-index: 1; transition: all 0.5s ease 0s; } .link:focus, .link:hover{ color: #999; text-shadow: 2px 2px rgba(16,165,194,0.3); } .link:before{ content: ''; background: #ccc; height: 3px; width: 50px; border-radius: 50%; transform: translateX(-50%); position: absolute; left: 50%; bottom: -2px; z-index: -1; transition: height 0.3s ease 0s,opacity 0.3s ease 0.15s; } .link:hover:before{ opacity: 0; height: 100%; } @media only screen and (max-width: 767px){ .link{ margin-bottom: 30px; } }