CSS在鼠标悬停时添加插入底部边框

Question

我的老板要我修改菜单 - 它是用图片制作的，现在他要我用CSS做按钮。我创建了按钮，但现在我需要在鼠标悬停时更改它们，如图像所示：

现在，我真的不是设计师，我更喜欢服务器端的东西，但我需要这样做..我创建的按钮的代码是：

a { 
    text-transform:none;
    color:#F1EFED;
    padding:10px;
    background-color: #84c225;
}

我怎样才能获得这种效果？

Answer 1

a {
    text-transform:none;
    text-decoration:none;
    color:#F1EFED;
    padding: 10px;
    background-color: #84c225;
}
a:hover {
    padding-bottom: 4px;
    border-bottom: 6px solid #97e127;
}

http://jsfiddle.net/jTC9C/1/

这是如何运作的：

在悬停时，您可以将填充底部（以px为单位）减小您想要应用的边框的大小。

---

奖金 - 过渡

如果要添加CSS3过渡，则必须拆分边界定义，而使用border-bottom-width代替，因为您无法为复合声明设置动画：

a {
    text-transform:none;
    text-decoration:none;
    color:#F1EFED;
    padding: 10px;
    background-color: #84c225;
    transition: all 0.3s;
    border-bottom: 0px solid #97e127;
}
a:hover {
    padding-bottom: 4px;
    border-bottom-width: 6px;
}

http://jsfiddle.net/jTC9C/2/

Answer 2

a:hover{
  box-shadow: inset 0 -5px 0 0 lightgreen
}

演示：http://jsfiddle.net/xPHCd/

您还需要添加其他特定于浏览器的规则（例如-moz-box-shadow）