如何实现宽度随H1文本变化、中间加粗的底部边框？

嘿，我完全get到你想要的效果了——给H1标题加个跟着文本宽度动态变化的底部边框，而且中间部分要比两边更粗对吧？之前用display:inline和伪元素没搞定，我给你两个实用的方案，都能完美实现需求：

方案一：双伪元素组合（最直观易调整） #

这个思路是用两个伪元素分别模拟细边框和中间的粗边框，让H1的宽度完全由文本内容决定：

h1 {
  display: inline-block; /* 关键！让H1宽度随文本自适应，同时支持绝对定位 */
  position: relative;
  padding-bottom: 8px; /* 给底部边框预留空间，避免和文本挤在一起 */
}

/* 第一步：做整个文本宽度的细底边框 */
h1::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px; /* 细边框的高度 */
  background-color: #000;
}

/* 第二步：在中间叠加一个粗边框 */
h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%; /* 左右各留20%的细边框区域 */
  width: 60%; /* 中间粗边框占60%宽度 */
  height: 3px; /* 粗边框的高度 */
  background-color: #000;
}

你可以根据需求调整这些数值：比如修改left和width的比例来控制中间粗边框的宽度，调整height来改变粗细，padding-bottom控制边框和文本的间距。

方案二：渐变背景+伪元素（更简洁） #

如果想少写一个伪元素，也可以用背景渐变实现细边框，再用伪元素加中间粗边框：

h1 {
  display: inline-block;
  padding-bottom: 8px;
  /* 用渐变实现全宽细边框 */
  background: linear-gradient(#000, #000) bottom / 100% 1px no-repeat;
  position: relative;
}

h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 15%;
  width: 70%;
  height: 3px;
  background-color: #000;
}

为什么你之前的尝试没成功？ #

你之前用display:inline是个小坑——行内元素的绝对定位是基于最近的块级父元素，而不是自身的文本宽度，所以伪元素没法准确跟着H1文本走。换成inline-block就解决了这个问题，它既保持了行内元素的“自适应宽度”特性，又拥有块级元素的盒子模型，能让伪元素精准定位在H1的底部。

内容的提问来源于stack exchange，提问作者Russel Riehle