HTML5 effects: How to create an underline effect like Twitter

Share RGraph:  

Summary
An example of how to create an underline effect for links like Twitter uses. There are two options demonstrated - and they differ in the direction that the underline grows.

This is a straight-forward effect that you can use on links that appear in a header. Instead of the entire link being highlighted just the link is simply underlined. There are three different methods shown - one where the underline grows downwards and that uses the border-bottom CSS property and gradually increases its width. And theres another example where the underline grows upwards. This example uses pretty similar CSS and identical HTML except for adding the box-sizing property;. And then finally there's another example which simply sets the text-decoration property to underline when the text is hovered over.

Method 1: Adding border-bottom to the text

This utilises the border-bottom property - initially it being set to nothing but unlike the above method the border grows upwards instead of down. This is done by setting the box-sizing CSS property.

<style>
    /*
    * Some basic font styling
    */
    div#menu1 {
        font-size: 16pt;
        font-family: sans-serif;
    }

    /*
    * Some straight-forward styling. The display is set to inlin-block,
    * the height is set (so things don't shift). The border-bottom is set to
    * zero width (though the size and style are set) and the transition is added
    * so that the adding of the border width is animated.
    */
    div#menu1 > div {
        display: inline-block;
        height: 30px;
        border-bottom: 0 gray solid;
        transition: border-bottom-width .2s linear;
    }
    /*
    * When the span is hovered over set the bottom border width to 3px.
    */
    div#menu1 > div:hover {
        border-bottom-width: 3px;
    }
</style>

<div id="menu1">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
</div>
See an example of it here.

 

 

 

Method 2: Adding border-bottom to the text and setting box-sizing

This method is very similar to the above method - increasing the size of the border - though here the box-sizing property has been set to border-box so the border grows towards the text instead of away. More like what Twitter uses.

<style>
    /* Set the font and size of the text */
    div#menu {
        font-size: 16pt;
        font-family: sans-serif;
    }
    
    /*
    */
    div#menu > div {
        display: inline-block;
        height: 30px;
        background-color: white;
        box-sizing: border-box;
        border-bottom: 0 gray solid;
        transition: border-bottom-width .2s linear;
    }

    /*
    */
    div#menu > div:hover {
        border-bottom-width: 3px;
    }
</style>

<div id="menu">
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
</div>
See an example of it here.

 

 

 

Method 3: Using the text-decoration CSS property (also called "the cop-out method"...)

And here is the easy method - simply using the text-decoration property to underline the text. There's not a lot to say except that the space between the text and the underline can't be controlled.

<style>
    div#menu1 {
        font-size: 16pt;
        font-family: sans-serif;
    }

    div#menu1 > div {
        display: inline-block;
    }

    div#menu1 > div:hover {
        text-decoration: underline;
    }
</style>

<div id="menu3">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
</div>
See an example of it here.

Conclusion

So there you have it - pick your poison. Personally I favour the second method - the same one as what Twitter uses. And the first two methods really aren't that complicated so there shouldn't be any reason to use the text-decoration option - but if you like it then go right ahead!