.link{ color: #555; font-family: 'Raleway', sans-serif; font-size: 25px; font-weight: 500; line-height: 20px; text-transform: capitalize; letter-spacing: 1px; display: inline-block; position: relative; z-index: 1; transition: all 0.5s; } .link:focus, .link:hover{ color: #048006; } .link:after{ content: ''; background: #048006; height: 8px; width: 8px; border-radius: 50%; position: absolute; top: -2px; right: -2px; z-index: -1; transition: all 0.3s ease 0s; } .link:hover:after{ background-color: #999; width: 100%; height: 5px; opacity: 0.5; transform: translateX(50%); right: 50%; top: 92%; } @media only screen and (max-width: 767px){ .link{ margin-bottom: 30px; } }