I read the Webkrauts advent calendar article by Jens Grochtdreis earlier today, it is about headers with lines on the side, like in the article image. (There is a similar article by Chris Coyier on CSS-Tricks for English-speaking people out there.) He presents a solution with one or two pseudo-elements and an extra <span> in both cases, and has a pretty simple code for it as well.

I wondered if there is an even simpler solution, and I believe I have found one that doesn’t need the second <span> and just uses the pseudo-elements. One warning: the solution depends on Flexbox, so older browsers are out of luck and you might need some prefixes. But yeah, progressive enhancement!

Heading – oh look, no span!

h2 {
  display: flex;
  align-items: center;
  color: rebeccapurple;
}
h2::before, h2::after {

flex: 1;

height: 3px;

content: '';

background-color: currentColor;

}
h2::before { margin-right: 10px; }

h2::after  { margin-left:  10px; }

We define the heading as a flex container, align-items centers the pseudo-elements. The ::before and ::after pseudo-elements are set to the height that defines the width of the line. Using flex: 1 distributes the pseudo-elements evenly, and as they are before and after the text, they push it to the center. Margins help to have a gap between the text and the lines. To add the left and right variants, these two “modifier classes” (also known as layout classes) can be defined:

.left-aligned::before {
  flex: 0;
  margin-right: 0;
}
.right-aligned::after {

flex: 0;

margin-left: 0;

}

Voilà! The effect works perfectly, is scalable and works when you don’t have tight control over the HTML, such as when you get output from a CMS WYSIWYG editor. You can play with the code in the following CodePen:

See the Pen Line-On-Sides Headers with Flexbox by Eric Eggert (@yatil) on CodePen.

See the Pen Line-On-Sides Headers with Flexbox by Eric Eggert (@yatil) on CodePen.

Addendum

Of course, while writing this article, Gunnar Bittersman had already posted the Flexbox approach to the article comments. He knows everything. But while reading the comments, the topic of more words per line came up and how the solution looks when there are more lines involved. Turns out: Not too good. The lines shrink to 0 and the only thing you see is the margin. Flexbox to the rescue. Again!

The flex shorthand can take the values of three other properties: flex-grow, flex-shrink, and flex-basis. If we set flex-basis to 20%, this is the default width of the element. flex-shrink is set to 0 to avoid shrinking below those 20% but the flex-grow is set to 1 to allow growing larger than 20%:

h2:before, h2:after {
  flex: 1 0 20%;
  height: 3px;
  content: '';
  background-color: currentColor;
}

And a CodePen for you to play around with this solution:

See the Pen Line-On-Sides Headers with Flexbox and minimal lines by Eric Eggert (@yatil) on CodePen.

See the Pen Line-On-Sides Headers with Flexbox and minimal lines by Eric Eggert (@yatil) on CodePen

And here is another example. This time we use border-image and a gradient around the heading:

See the Pen Line-On-Sides Headers with Flexbox and border images by Eric Eggert (@yatil) on CodePen.

See the Pen Line-On-Sides Headers with Flexbox and border images by Eric Eggert (@yatil) on CodePen.