Ben Sibley on "[Theme: Tracks] Menu Underline Indicator"

There is in fact an easy this can be done with just CSS. Here is the complete code:

#menu-item-58 > a { position: relative; color: #f78d1d; text-decoration: none;
}
#menu-item-58 > a:hover { color: #f78d1d;
}
#menu-item-58 > a:before { content: ""; position: absolute; width: 100%; height: 3px; bottom: 0; left: 0; opacity: 0; background-color: #f78d1d; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out; transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
}
#menu-item-58 > a:hover:before { -webkit-transform: scaleX(1); transform: scaleX(1); opacity: 1;
}
#menu-item-58.current-menu-item > a:before { -webkit-transform: scaleX(1); transform: scaleX(1); opacity: 1;
}

The last part is where the underline is set to display automatically on the current page. The menu items (li elements) will always have a current-menu-item class added to them when on their page. I've added this as a qualifying class to the ID selector.

I also switched visibility to opacity for fading in the underline as this seems to work smoother across browsers, but you can omit the opacity part entirely if you'd like since the scaling hides the line already.

Lastly, I updated the transition values to specifically target the transform and opacity properties. Using "all" in transition can cause weird displays issues (Safari in particular).

- - , .
.