扩展边框 css 的长度

Question

如何将边框的长度扩展到超过文本的长度？这是我到目前为止所拥有的：

     color: #8C4600;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    border-bottom: 1px solid #D1D1D1;

这是 HTML： <li class = "vendors">VENDORS</li>

原文由 user12074577 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

CSS 边框位于 HTML 元素的边距和填充之间。如果您希望 HTML 元素的边框超出该元素的宽度（或高度），您可以向该元素添加 CSS 填充以将边框向外推。

例如，如果您的 html 是 <li class=vendors">VENDORS</li> 添加 padding:0 10px; 到您的 CSS 将使左右边框向外推 10px。

原文由 ASGM 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用填充和负边距。

例如：

 div {
  padding: 1em;
  margin: 0 -1em;
  border-bottom: 1px solid red;
}

上面给出了所有边的填充，以及左右两侧的负 1em 边距。你可能想摆弄那个。

原文由 Jeremy Carlson 发布，翻译遵循 CC BY-SA 3.0 许可协议