Link + Border

by vvv vvvv

HTML

<ul class="menu">
    <li><a href="#">A link</a></li>
    <li><a href="#">Another link</a></li>
    <li><a href="#">XYZ</a></li>
    <li><a href="#">Last link</a></li>
</ul>

CSS

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200);

body {
    padding: 20px;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 2em;
}

.menu a {
    padding: 0 10px 5px;
    border-bottom: 1px solid;
    color: #999;
    text-decoration: none;
    /*Transition*/
    -webkit-transition: color 0.2s linear;
    transition: color 0.2s linear;
}

    a:hover { border-bottom-width: 3px; color: #ffbf00; }
    .menu li:first-child a { padding-left: 0; }
    .menu li:last-child a { padding-right: 0; }

ul.menu {
    display: inline-block;
    padding-bottom: 5px;
    border-bottom: 1px solid #999;
}

.menu > li {
    float: left;
}