Tabs css

tabs.css

#tabs ul {
    margin: 10px;
    padding-left: 0;
    display: inline-block;
} 

#tabs ul li {
    list-style: none;
    float: left;
}
    
        
#tabs ul li a.here {
    border-bottom: 1px solid #ffc;
    list-style: none;
    display: inline;
}

a {
    border: 1px solid #000;
    text-decoration: none;
    padding: 5px 15px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
}

em {
    display: inline-block;
    width: 4px;
    padding: 5px 0px;
    border-bottom: 1px solid #000;
    text-indent: -2000em;
}

tabs.html

<div id="tabs">
<ul>
    <li><em>under line</em><a href="#">Item 1</a><em>under line</em></li>
    <li><a href="#">Item 2</a><em>under line</em></li>
    <li><a class="here" href="#">Item 3</a><em>under lined</em></li>
    <li><a href="#">Item 4</a><em>under line</em></li>
</ul>
</div>