Ok, I was able to do it without any extra <span>
or <div>
by splitting up the pseudo elements and aligning their backgrounds left and right, respectively. Then I'm able to set the padding via the width of the background like so (example has a 5% padding on both sides):
.section-heading {
display: table;
white-space: nowrap;
}
.section-heading:before {
background: linear-gradient(to bottom, black, black) no-repeat left center / 95% 1px;
content: "";
display: table-cell;
width: 50%;
}
.section-heading:after {
background: linear-gradient(to bottom, black, black) no-repeat right center / 95% 1px;
content: "";
display: table-cell;
width: 50%;
}
demo here, thanks everyone for helping!