HTML/CSS中如何设置元素下边框的水平宽度为20像素

你当前的代码里，border-bottom: 20px solid black是把边框的厚度设为20px，而非边框的水平长度，所以边框会铺满整个元素宽度，和你想要的效果不符。下面是几种可行的实现方法：

方法一：使用伪元素（推荐，灵活性最高） #

通过伪元素模拟固定宽度的下边框，不影响原元素布局，还能自由调整位置、尺寸：

h2 {
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
  display: inline-block;
}

h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0; /* 可修改为50%后加transform: translateX(-50%)实现居中 */
  width: 20px; /* 这里设置水平宽度为20px */
  height: 2px; /* 边框厚度，按需调整 */
  background-color: black;
}

方法二：使用背景渐变 #

纯CSS背景实现，无需额外元素，适合简单场景：

h2 {
  padding-top: 20px;
  padding-bottom: 20px;
  display: inline-block;
  /* 语法：渐变颜色 / 宽度 高度 位置 重复方式 */
  background: linear-gradient(black, black) bottom left / 20px 2px no-repeat;
}

方法三：添加内嵌元素 #

如果需要边框跟随文本最后一行，可在标题内加一个小元素单独设置样式：

<h2>你的标题内容 <span class="short-bottom-border"></span></h2>

h2 {
  padding-top: 20px;
  padding-bottom: 20px;
  display: inline-block;
}

.short-bottom-border {
  display: block;
  width: 20px;
  height: 2px;
  background-color: black;
}

内容的提问来源于stack exchange，提问作者sam lamiscan