如何设置border-bottom宽度？实现非100%宽度底部边框求助

如果要让底部边框左右各留5px间距，且不铺满元素宽度，直接用原生border-bottom属性无法实现，因为它是跟随元素的盒模型宽度的。这里提供两种实用的实现方法：

方法一：使用伪元素（推荐） #

通过伪元素创建独立的底部边框，精准控制左右间距，同时不影响原元素的布局：

/* 目标元素 */
.text-with-border {
  position: relative;
  padding-bottom: 8px; /* 可选：调整文本与边框的垂直间距 */
  /* 如果元素是块级且想让宽度适配文本，添加下面一行 */
  display: inline-block;
}

/* 伪元素实现带间距的底部边框 */
.text-with-border::after {
  content: '';
  position: absolute;
  left: 5px;    /* 左间距5px */
  right: 5px;   /* 右间距5px */
  bottom: 0;
  height: 2px;  /* 边框厚度 */
  background-color: #222; /* 边框颜色 */
}

这种方法的优势是：边框宽度会自适应元素的内容宽度（如果设置了inline-block），且能灵活调整间距、厚度和颜色。

方法二：利用背景渐变模拟边框 #

适合块级元素，通过内边距和背景渐变来实现：

.text-with-border {
  padding: 0 5px;       /* 左右各5px内边距 */
  padding-bottom: 8px;  /* 文本与边框的垂直间距 */
  background-image: linear-gradient(#222, #222);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: calc(100% - 10px) 2px; /* 宽度=元素总宽度-左右间距总和 */
}

这里通过calc(100% - 10px)让渐变线的宽度比元素总宽度少10px，从而实现左右各5px的空白。

内容的提问来源于stack exchange，提问作者Mohammed Mustafa