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

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

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

当它处于活动状态或悬停在上面时，它应该在按钮下方显示一个矩形

这是按钮

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

---

如果以下是您的HTML：

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

Fiddle回应评论：

上面使用“框对齐”属性将底部边框居中，无需调整，但在IE9及以下版本中不起作用

---

：将在所有浏览器中工作，但您必须使用li和其中的标记的相对定位来调整底部的中心位置。

您可以在：带边框底部悬停： 但是你可能已经没有悬停了，所以要避免跳跃

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

a:hover {
  border-color: blue
}

上面的代码并不是您所需要的全部

-斯文

---

编辑：正如您看到的另一个答案，您可以直接在列表元素上进行编辑。

啊，太好了，这很好。但是我可以让它也有一个特定的宽度吗？是的，你可以@luikstruikHow确切地说？也许也可以把它放在按钮下方的中心位置？我会在5分钟内添加一把小提琴，尝试边线高度和边线宽度，但这对我来说是一样的。没错，但我没有在那里正确地表达出来，而且从那以后我再也没有得到任何反馈。请求删除另一个线程。

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;
    }

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;
    }