css - 使用 CSS 将 "underline"添加到框

Question

我想通过 CSS 实现这样的效果:

我是 CSS 新手。

我的问题:

• 如何在底部添加一条绿线，如下所示？我是否必须在包含文本的 div 下添加一个小的 div 并将其背景设置为绿色？我知道有很多方法可以做到这一点，但我只想学习最佳实践。
• 这是 Arial 字体吗？

Answer 1

您可以按照您的描述在底部添加 div，也可以使用边框。无论哪种情况，您都需要调整高度。没什么大不了。

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>

我没眼力说那个字体是不是Arial。如果不是的话，我可以说它是一种类似的无衬线字体。