求助：如何在HTML和CSS中为文本添加下方边框

根据你的需求，要实现类似示例图中文本下方的短边框效果，无需修改现有HTML结构，通过CSS就能完成，以下是两种常用方法：

方法1：适配文本宽度的边框 #

默认<h1>是块级元素，border-bottom会撑满父容器宽度，通过将其设置为行内块元素，让边框仅跟随文本宽度：

.Sectionheading h1 {
  display: inline-block;
  /* 自定义边框样式：粗细、样式、颜色 */
  border-bottom: 3px solid #2d3748;
  /* 调整文本与边框的间距 */
  padding-bottom: 6px;
}

方法2：自定义长度的边框（更灵活） #

如果需要边框比文本短，或者想让边框居中显示，用伪元素实现更灵活：

.Sectionheading h1 {
  position: relative;
  padding-bottom: 6px;
}

.Sectionheading h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  /* 让边框居中：left设为50%，再向左偏移自身一半宽度 */
  left: 50%;
  transform: translateX(-50%);
  /* 自定义边框长度和样式 */
  width: 80px;
  height: 3px;
  background-color: #2d3748;
}

只需把上述CSS代码添加到你的样式表中，替换颜色值为你需要的颜色即可。

内容的提问来源于stack exchange，提问作者Anesu Mazvimavi