Add an "underline" to a box with CSS

css

Solution

You can either add the div at the bottom as you described, or you can use a border. In either case you'll have some adjustment of heights to do. No big deal.

http://jsfiddle.net/PQgH3/2

div {
    width: 50%;
    padding-top: 10px;
    font-size: 24px;
    text-align: center;
    font-family: arial, sans-serif;
}
.followers {
    background-color: #777;
    float: right;
    height: 75px;
    color: #ccc;
}
.following {
    background-color: #555;
    float:left;
    height: 70px;
    color: #ccc;
    border-bottom: 5px solid lime;
}

<div class="followers">Followers</div>
<div class="following">Following</div>

I don't have the eye to say whether that font is Arial. I can say that it's a similar sans-serif font if it isn't.

Problem

I want to achieve something like this by CSS: I'm a novice with CSS. My questions: - How can I add a green line to the bottom as below? Will I have to add a small `div` under the `div` containing the text and set its background to green? I do know there are many ways to do it but I just want to learn the best practice. - Is this font Arial?

Original source