After finding an example for a header with lines on the side (source here, specifically: here), I've managed to implement it successfully. However, I am facing a challenge when trying to add some padding to both sides of the text and having the lines dynamically stretch to fit the container width. Does anyone have any insights on how to achieve this?
My current HTML code looks like this:
<h2 class="section-heading">Example</h2>
Accompanied by the following CSS:
.section-heading {
display: table;
white-space: nowrap;
}
.section-heading:before,
.section-heading:after {
background: linear-gradient(to bottom, black, black) no-repeat center / 90% 1px;
content: "";
display: table-cell;
width: 50%;
}
(You can view it on jsfiddle, ideally I'd prefer not to introduce extra elements into the structure)