如何将边框的长度扩展到超过文本的长度？这是我到目前为止所拥有的：
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>使用填充和负边距。
例如：
div {
padding: 1em;
margin: 0 -1em;
border-bottom: 1px solid red;
}
上面给出了所有边的填充，以及左侧和右侧负 1em 边距。你可能想摆弄它。
CSS 边框放置在 HTML 元素的边距和内边距之间。如果您希望 HTML 元素的边框延伸超过该元素的宽度（或高度），您可以向该元素添加 CSS 填充，以便将边框向外推。
例如，如果您的 html 是
<li class=vendors">VENDORS</li>padding:0 10px; .inner {
width: 80%;
}
.outer {
border-bottom: 1px solid #D1D1D1;
color: #8C4600;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 15px;
}<div class="outer">
<p class="inner">Your text</p>
</div>不过，您可能需要设置外部宽度。因为它可能无法在每个浏览器中正确自动缩放。或者只是将外部设置为 120%，将内部设置为固定宽度。这应该可以通过多种方法实现。
只需将边框扩展到
vw这就是我的意思：
.vendors {
width: 100vw;
border-bottom: 1px solid hsla(0, 0%, 0%, 1);
}<li class="vendors">VENDORS</li>我也试图找到这个问题的答案，希望我能回答预期的问题...以列表（li）为例...
li{
border-style:solid;
width:200px; /* this allows extension of border past text */
}
如果需要，您还可以将文本与诸如
之类的内容进行不同的对齐 text-align: center;
你必须在CSS中指定
"border: ##px color;这将在相关 html 标签周围创建一个边框。
示例代码是：
<!DOCTYPE html>
<html>
<head>
<style>
p {
width:225px;
border-style:solid;
border:2px solid red;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
默认情况下，如果没有设置 width 和 border-style，边框将占据 100% 的空间。您可以以任何您想要的方式限制其宽度和样式。
这里有一个链接 一个对您最有帮助的网站。