.styled-underline { white-space: nowrap; position: relative; isolation: isolate; } .styled-underline::before { content: ""; position: absolute; bottom: 0px; left: -5px; right: calc(100% + 5px); height: 30%; background-color: var(--primary); z-index: -1; transition: right 0.5s ease-out; transition-delay: 0.5s; } .styled-underline[active="true"]::before { right: -5px; }