.link{ color: #fff; font-family: 'Raleway', sans-serif; font-size: 22px; font-weight: 500; text-transform: capitalize; padding: 0 10px; display: inline-block; position: relative; transition: all 0.5s ease 0s; } .link:hover, .link:focus{ color: #fff; } .link span{ mix-blend-mode: difference; display: block; } .link:before{ content: ''; background: #000; width: 52%; height: 100%; position: absolute; top: 0; left: 0; transition: all 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .link:hover:before{ width: 100%; } @media only screen and (max-width: 767px){ .link{ margin-bottom: 30px; } }