NavBar effect similar to Twitter

If you use a fixed height and if you want the animated effect (which is usually in the profiles), use box-sizing: border-box; combined with transition:

So:

/*Remove margens da página*/
html, body {
    padding: 0;
    margin: 0;
}

/*sombra no navbar*/
.navbar {
     box-shadow: 0 1px 1px rgba(0,0,0,0.15);
}

/*coloca os links lado a lado*/
.navbar a {
    float: left;
    padding: 15px;
    height: 46px;
    text-decoration: none;
    border-bottom: 0 #f00 solid;
    box-sizing: border-box;
    transition: border-bottom-width .2s;
}

/*faz com que o navbar acompanhe a altura dos links*/
.navbar::after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
}

/*adiciona bordar em baixo se o link estiver com foco ou tiver a classe*/
.navbar a:focus, .navbar a:hover, .navbar a.actived {
    border-bottom-width: 4px;
}

<nav class="navbar">
    <a href="#">Home</a>
    <a href="#">Tweets</a>
    <a href="#">About</a>
</nav>

About the box-sizing property

The property is supported by browsers:

• Internet Explorer 8 or higher
• Safari 3.1 through to version 5 if you use the prefix border-bottom-width:
• Safari 5.1 or higher without the prefix
• Android 2.1 browser until version 3 if you use the prefix -webkit-
• BlackBerry 7 if you use the -webkit-
• The prefix -webkit- was only required up to version 28 of Firefox

Supported values are:

• content-box

  This is the default value as specified by the CSS standard. The -moz- (width) and width (height) properties are measured by including only content, but not height , padding or border . Note: margin , padding and border will be outside the box, for example: If margin then if you apply a .box {width: 350px} property the rendered result in the browser, will {border: 10px solid black;}

• border-box

  Width properties ( .box {width: 370px;} ) and height ( width ) include% size height and property padding , but do not include border property.

• padding-box

  Width properties ( margin ) and height ( width ) include% size height , but do not include property padding and border .

    

  This value is supported only by Gecko-based browsers such as Firefox