HTML5 Effects: An example of an expanding, animated underline effect

Summary
This is an example of an animated underline effect that you could apply to your menu(s). Initially there's no underline and then on mouseover the underline expands out in both directions from the center.

Menu system effects come and menu system effects go, and here's another one for you to drool over. Perhaps. The menu items are initially not underlined (though this could be changed of course) and then when you mouse over an item the underline starts in the center and expands out from the center. There's an example of it shown below along with sample code.

It's not a whole lot of code and nor is it particularly complicated. Here's the demo

And here's the whole code that's necessary to accomplish it:

<style>
    /* The enclosing DIV that is the entire menubar */
    div#menubar {
        background-color: #eee;
    }

    /* Each menu item is a SPAN tag and this CSS is applied to each. Here it's just some spacing */
    div#menubar span {
        display:inline-block;
        padding: 10px 2% 10px 2%;
    }

    /*
    * This is the bit that really creates the whole effect. Using
    * the ::after operator  it adds an element that has no content and that
    * initially has no width (the transform scales it down to zero). The 
    * transition just specifies how the transform value will be animated
    * when it happens to be changed.
    */
    div#menubar span::after {
      display: block;
      content: '';
      border-bottom: solid 3px #019fb6;  
      transform: scaleX(0);  
      transition: transform .25s ease-in-out;
    }
    
    /*
    * This snippet simply changes the value of the scaleX() transformation that
    * was set above. It was set to zero but this (when the span tag is being
    * hovered over) but here it is set to one. The transition that was given
    * above to the span::after element takes care of the animating of the border.
    */
    div#menubar span:hover:after {
        transform: scaleX(1);
    }
</style>

<!-- This is the HTML code that is for the menu items. As you see - it's very simple. -->
<div id="menubar">
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
    <span>Item 4</span>
    <span>Item 5</span>
    <span>Item 6</span>
</div>
A stand-alone example of this

A slight variation

Here's a minor variation on the menu system that removes the background color from the menu bar and adds an underline that's persistently enabled. Use the same HTML code from above (the DIV and SPAN tags)

<style>
    div#menubar2 {
        background-color: rgba(238,238,238,0.5);
        border: 1px solid #eee;
    }

    div#menubar2 span {
        display:inline-block;
        margin: 10px 2% 10px 2%;
        border-bottom: 3px solid #ddd;
    }

    div#menubar2 span::after {
      display: block;
      position: relative;
      top: 3px;
      content: '';
      border-bottom: solid 3px #019fb6;  
      transform: scaleX(0);  
      transition: transform .25s ease-in-out;
    }

    div#menubar2 span:hover::after {
        transform: scaleX(1);
    }
</style>
A stand-alone example of this
Share RGraph!