.link{ color: #555; font-family: 'Ubuntu', sans-serif; font-size: 22px; font-weight: 500; line-height: 20px; text-transform: lowercase; letter-spacing: 1px; display: inline-block; position: relative; transition: all 0.3s ease; } .link:hover, .link:focus{ color: #17b4d3; } .link:before{ content: ''; border-top: 4px dashed #17b4d3; height: 5px; width: 100%; transform: scaleX(0); position: absolute; left: 0; top: -7px; transition: transform 0.3s ease 0s,border 0.3s ease 0.5s; } .link:hover:before{ transform: scaleX(1); } @media only screen and (max-width: 767px){ .link{ margin-bottom: 30px; } }