[Resolved] Animated Underline Css

[Brian]

Hi,

Sorry to bother you so close to Christmas, When you get a chance, is there a way to have an animated underline in css for the sidebar menu, not for the main menu?

Kind Regards,

Brian Thompson

[Tom]

Hi there,

This should help:

@media (min-width: 769px) {
    .sidebar .menu li > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 0;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);

        display: block;
        width: 0;
        height: 2px;

        background-color: currentColor;
        transition: 0.3s width ease;
    }
    .sidebar .menu li.menu-item.current-menu-item > a::after,
    .sidebar .menu li.menu-item.current-menu-ancestor > a::after,
    .sidebar .menu li.menu-item > a:hover::after {
        width: 100%;
    }
}

Merry Christmas! 🙂

[Brian]

And many Happy Returns to you and yours.

Kind Regards,

Brian Thompson

[Tom]

Thank you! 🙂

[Author]

Posts