How to display a horizontal line before and after a heading in css

Question

I am trying to style a an html heading in css but am not getting the correct result as my jsfiddle shows: https://jsfiddle.net/Nadjanara/nmo0245t/ . The following are the html and css codes:

<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; 
}

How can I put the horizontal line only before and after the heading and also control the width of the line so that such doesn't occupy the full width of the screen?

Answer 1

There's obviously many ways you can achieve what you're after. But how about something like 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>