Nadj Nadj - 5 months ago 7
CSS Question

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

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

There's obviously many ways you can achieve what you're after. But how about something like this?

h1::before,
h1::after {
    display: inline-block;
    content: "";
    border-top: .3rem solid black;
    height: 4rem;
    width: 2rem;
    margin: .5rem;
    transform: translateY(95%);
}
<h1>Heading</h1>