Animate link underlines

Example

Usage

Animate a link's underline! Add a span to the link which acts as the underline:

<a href="#">Hover over me! <span class="menuHighlight"></span></a>

The span is scaled down to zero width using CSS transform in the non-hover state, which hides it from view. On hover, the span is scaled to full-width and a transition animation is used to provide the animation.

/* the span */
.menuHighlight {
    /* styling */
    background-color: #ffa300;
    width: 100%;
    display: block;
    height: 2px;

    /* scale to 0 width */
    -webkit-transform: scale(0, 1);
    -moz-transform: scale(0, 1);
    transform: scale(0, 1);

    /* add a transition animation */
    -moz-transition: all 0.12s ease-in-out;
    -webkit-transition: all 0.12s ease-in-out;
    transition: all 0.12s ease-in-out;
}

/* on hover scale the span to full width */
a:hover .menuHighlight {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    transform: scale(1, 1);
}

This will only work in modern browsers which support CSS transforms, so IE8 and under will display the span all the time. As a fallback you could use conditional comments to add a class to the page, then target the specific browsers in CSS to hide/show the span as needed.

This does have the downside of adding an additional element to the page for each link, and you need to remember to add the span to each link which needs to be animated. However, you could try using an :after pseudo-element to automatically generate the underline; also, having a separate element means that it can be styled separately to the link itself, so doesn't have to be the same colour or could have additional transforms applied.