使用 CSS 添加“下划线”到框

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。如果不是的话，我可以说它是类似的无衬线字体。