How do I apply padding or a margin to this heading displayed as a table-cell?

Question

I've adapted an example for a header with lines on the side (found here, more specifically: here). It works pretty well, but what I'm unable to do is apply some padding to either side of the text, and have the lines on the side stretch to hug either side of the container. Does anyone know how to do that?

So far I have the following HTML:

<h2 class="section-heading">Example</h2>

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

(I've put it on jsfiddle, preferably I'd like to do this without any extra elements)

Answer 1

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!

Answer 2

here's my solution, add <span></span> inside your h2 Element and then add padding/margin to h2 span {}

http://jsfiddle.net/dASCv/7/

Answer 3

Like this demo ?

Then just add border-spacing to your section-heading

Answer 4

Add position: relative;top: 0.6em; to your css pseudo classes.

Answer 5

You may have to have an internal wrapper handling the padding like so:

HTML:

<h2 class="section-heading"><div class="section-heading-padding">Example</div></h2>

CSS:

.section-heading {
  display: table;
  white-space: nowrap;
}

.section-heading-padding {
  padding: 0 200px;
}

.section-heading:before,
.section-heading:after {
  background: linear-gradient(to bottom, black, black) no-repeat center / 100% 1px;
  content: "";
  display: table-cell;
  width: 50%;
}

Not really ideal I suppose. Hopefully someone can provide you a better solution.

JSFiddle here.

EDIT: I've updated this to have the lines hug the sides.

The reason the lines were not hugging the sides is because their widths were set to 90%. I assume this was because it added a padding around the text; however, the unwanted side effect was that it also added padding around the outer edges. Setting them to 100% widths and then having the internal padding handling the padding around the text seems to produce the results you want.