如何让h2元素下边框从Tech的字母T处开始而非页面最左侧？

当前H2的下边框是从元素左边缘（包含padding-left区域）开始，要改成从文本"Tech"的首字母"T"处开始，以下是两种可行方案：

方案1：用span包裹文本（直观易维护） #

修改HTML，将H2内的文本用<span>标签包裹：

<div class="page-container">
  <div id="main-article">
    <h2><span>Tech</span></h2>
  </div>
</div>

调整CSS，移除H2本身的边框，给内部span添加下边框：

#page-container {
  width: 1250px;
  margin: 0 auto;
}

h2 {
  font-weight: normal;
  padding-left: 15px; /* 保留文本的左偏移效果 */
  font-size: 22px;
  margin-top: 5px;
  float: left;
  width: 55px;
}

h2 span {
  border-bottom: 3px #b80000 solid;
}

方案2：使用CSS伪元素（无需修改HTML） #

如果无法调整HTML结构，可通过伪元素定位实现边框对齐文本起始位置：

#page-container {
  width: 1250px;
  margin: 0 auto;
}

h2 {
  font-weight: normal;
  padding-left: 15px;
  font-size: 22px;
  margin-top: 5px;
  float: left;
  width: 55px;
  position: relative; /* 为伪元素提供定位基准 */
}

h2::after {
  content: "";
  position: absolute;
  left: 15px; /* 与padding-left值一致，对齐文本首字母位置 */
  bottom: 0;
  width: calc(100% - 15px); /* 边框宽度 = 元素总宽度 - 左padding */
  border-bottom: 3px #b80000 solid;
}

两种方案均能实现需求，方案1更便于后续样式调整，方案2适合HTML结构固定的场景。

内容的提问来源于stack exchange，提问作者Hardik Bhuta