Question

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?

Answer 1

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.