仅使用CSS在按钮下创建矩形

Question

我正在尝试创建一个基于CSS的“按钮”，如下所示：

蓝色只是一个背景，所以它只是关于文本“Welkom”和下面显示的矩形。

只要它处于活动状态或悬停在它上面，它就会在按钮下面显示一个矩形。

HTML :(这是按钮）

<li><a href="#" id="welkom">Welkom</a></li>

Answer 1

如果以下是您的HTML：

 <li><a href="#" id="welkom">Welkom</a></li>

然后你可以这样做：

li:hover,li:active{
    border-bottom:3px solid blue; /*change blue to the color you want*/
}

See this demo

---

回应评论：Fiddle 2

以上使用box-align属性（http://www.w3schools.com/cssref/css3_pr_box-align.asp）使底部边框居中（无需调整），但在IE9及以下版本中不起作用

---

Fiddle 3：适用于所有浏览器，但您必须使用其中li和a标记的相对定位来调整中心的底部。

Answer 2

你可以这样做：悬停在边框底部： 但你可能和边界已经没有悬停所以避免跳跃。

a {
border-bottom: 5px solid transparent;
}

a:hover {
  border-color: blue
}

以上代码并非您可能需要的全部代码。

-Sven

编辑：当你看到另一个答案时，你可以直接在列表元素上这样做。

Answer 3

simple just follow below code:

HTML:

<div class="link"><a href="#">Welkom</a></div>

CSS:

.link { background-color:#379AE6; width:100%; padding:8px; padding-bottom:16px; }

.link a{ font-family:arial; text-decoration:none; color:#fff;
    }

.link a:hover{ border-bottom:8px solid #6BBBF8; padding-bottom:8px;
    }