.link{ color: #2f3542; font-family: 'Mulish', sans-serif; font-size: 22px; font-weight: 700; text-transform: capitalize; display: inline-block; position: relative; transition: all 0.3s ease 0s; } .link:hover, .link:focus{ color: #528cb3; font-style: italic; text-shadow: 2px -2px rgba(0,0,0,0.15); } .link:before, .link:after{ content: ""; background: #528cb3; width: 35%; height: 2px; position: absolute; top: 0; left: 0; transition: all 0.35s ease; } .link:after{ top: auto; bottom: 0; left: auto; right: 0; } .link:hover:before{ left: 65%; } .link:hover:after{ right: 65%; } @media only screen and (max-width: 767px){ .link{ margin-bottom: 30px; } }