Html 编辑标题'；s边框底部长度

如何将标题的边框底部长度设置为比文本稍长一点？ 使用此代码将占用所有页面长度：

<div style="position:relative;">
    <h3 style="text-align:center; border-bottom:solid;">This is a test</h3>       
</div>

这是一个测试

我也尝试过这个代码：

<div style="position:relative;">    
        <h3 style="text-align:center;"><span style="border-bottom:solid;"> This is a test</span></h3>        
</div>

这是一个测试

---

但是，对于最后一个代码，它正好占用文本的长度，如何将边框底部长度设置得稍长一点？

在

上添加左/右填充以扩展边框

h3 span {
  padding: 0 10px; /* Increase left/right padding to extend borders */
}

这是一个测试

在

上添加左/右填充以扩展边框

h3 span {
  padding: 0 10px; /* Increase left/right padding to extend borders */
}

这是一个测试

在

的左右两侧使用

填充。请看下面的代码片段：


。文本保持器{
文本对齐：居中；
}
.文本{
显示：内联块；
填充：0 10px；
边框底部：3倍实心；
}

这是一个测试
在
的左右两侧使用
填充。请看下面的代码片段：


。文本保持器{
文本对齐：居中；
}
.文本{
显示：内联块；
填充：0 10px；
边框底部：3倍实心；
}

这是一个测试