.link{ color: #ff5e57; font-family: 'Mukta', sans-serif; font-size: 23px; font-weight: 700; line-height: 20px; text-transform: capitalize; letter-spacing: 1px; display: inline-block; position: relative; z-index: 1; transition: all 0.5s ease 0s; } .link:focus, .link:hover{ color: #fff; text-shadow: 5px 5px rgba(0,0,0,0.2); } .link:before{ content: ""; background: #ff5e57; transform: scaleX(0); transform-origin: bottom right; position: absolute; top: -1px; right: -2px; left: -5px; bottom: -1px; z-index: -1; transition: transform .3s ease; } .link:hover:before{ transform: scaleX(1); transform-origin: bottom left; } .link span{ line-height: 20px; display: block; } @media only screen and (max-width: 767px){ .link{ margin-bottom: 30px; } }