如何在html中的按钮下方添加水平1px白线

Question

如何在html5，css3

中悬停时在按钮下方显示一行

Answer 1

如果更改默认按钮css类，它将更改所有引导按钮。

.btn-default:hover {
    border-bottom: 1px solid black;
}

您可以轻松制作自己的css按钮课程。然后将它应用于几个按钮。

Answer 2

您可以使用类在css中执行此操作。如果您的导航按钮有一个＆＃39;导航按钮＆＃39;，您可以执行以下操作：

.nav-button:hover {
    border-bottom: 1px solid red; 
}

Answer 3

.nav-button:active {
    border-bottom: 10px solid rgb(255, 217, 0)!important;
}
.nav-button:visited {
    border-bottom: 10px solid rgb(255, 217, 0)!important;
}
.nav-button:hover {
    border-bottom: 10px solid rgb(255, 217, 0)!important;
}