@mixin nav-link { position: relative; padding: 8px; display: flex; justify-content: flex-start; border-bottom: 2px solid transparent; font-size: 15px; line-height: normal; &::before { content: ''; position: absolute; top: calc(100% - 4px); left: 8px; width: calc(100% - 16px); height: 2px; border-radius: 2px; background-color: var(--theme-color); transition: 0.16s 0.1s ease-out; transform: scaleX(0); } &:hover::before { transform: scaleX(1); } html[data-navbar-link-popup-content-align-style='left'] &, &.left { justify-content: flex-start; } html[data-navbar-link-popup-content-align-style='center'] &, &.center { justify-content: center; } html[data-navbar-link-popup-content-align-style='right'] &, &.right { justify-content: flex-end; } }