My personal thoughts about “The Force Awakens” are very well mirrored by the discussion on last week’s The Incomparable, Episode 277: Stormtroopers Are People. The panel consists of Jason Snell, Serenity Caldwell, Dan Moren and the hypercritical John Siracusa.

I think that Siracusa’s characterization of the movie (around the 2h45 mark) is especially noteworthy, where he states that he managed to judge the movie for its own merits and not to have unfair expectations.

Three (example) headings: One centered with horizontal lines on either side, One left aligned with only a line on the right and the final one right-aligned with the line on the left. There is some space between the lines and the text.

I read the Webkrauts advent calendar article by Jens Grochtdreis earlier today, it is about headers with lines on the side, quite like in the article image above. Actually exactly like the example above. (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 other <span> and just uses the pseudo elements. One caveat: the solution depends on flexbox, so older browsers are out of look and you might need some prefixes. But yeah, progressive enhancement!

<h2>Heading – oh look, no span!</h2>
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, ans 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.14519


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.14519

And here is another example. This time we use border-image and an SVG to have an ornament around the heading:

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