jquery – 如何在css中的标题之前和之后显示水平线

我试图在CSS中设置一个html标题,但是我没有得到正确的结果,因为我的jsfiddle显示： https://jsfiddle.net/Nadjanara/nmo0245t/.
以下是html和css代码：

<h2><span>Heading2</span></h2>

h2{
  width:100%; 
  text-align:center; 
  border-bottom: 1px solid #000; 
  line-height:0.1em; margin:10px 0 20px; 
} 
h2 span{
  padding:0 10px; 
}

如何仅在标题之前和之后放置水平线,还可以控制线条的宽度,使其不占据屏幕的整个宽度？

很明显,有很多方法可以实现你所追求的目标.但是像 this这样的东西怎么样？

h1 {
    font-size: 4rem;
}
h1::before,
h1::after {
    display: inline-block;
    content: "";
    border-top: .3rem solid black;
    width: 4rem;
    margin: 0 1rem;
    transform: translateY(-1rem);
}

<h1>Heading</h1>