Example

Hover over me!

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>/code>

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.