.hover-underline-animation { display: inline-block; position: relative; color: var(--bs-primary-text-emphasis); transition: all 500ms; } .hover-underline-animation:hover { /* text-shadow: 10px 10px #092565; */ /* text-shadow: 10px 10px 40px #092565; */ transform: scale(1.05); } .hover-underline-animation::after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: 0; left: 0; background-color: var(--bs-primary-text-emphasis); transform-origin: bottom right; transition: transform 500ms ease-out; } .hover-underline-animation:hover::after { transform: scaleX(1); transform-origin: bottom left; }