Line-On-Sides Headers

Forums user McAsh wondered how they might code up a design in which there was a large header and a smaller subheader beneath it which featured double horizontal lines jutting out after the text to both the left and right of the centered text. An easy thing to mock up as image, but a much more difficult thing to pull off in CSS because of the variable nature of text (length, size, etc).

The post mockup was this:

I coded up one way to do it which works, but isn't quite perfect. I figured I'd post it here and you all could chime in with better ways if you can think of them.

If the background was a solid color, this would be fairly easy. Apply the lined background to the subhead and center a span in the middle with a bit of padding and a background color to match the solid background. We don't have a solid background color here. Perhaps some trickery using the same background image but fixing the background position would work, but I didn't go there.

Instead, I used the ::before and ::after pseudo elements to create the left and right set of lines. The text is still in a span, which is relatively positioned. The right set is a pseudo element on that span which starts 100% from the left with a bit of margin to push it away, and vice versa for the left set. Both are of a fixed height and use border-top and border-bottom to create the lines. Thus no backgrounds are used and the insides of everything is transparent.

The length of the lines is long enough to always break out of the parent container, and they are cut off by hidden overflow on that parent.

Chris, to address your “magic number” concern, instead of doing line-height: 0.5, you can use percentage-based positioning (top: 50%) on the pseudo-element. This also lets you put overflow: hidden on a .fancy element instead of the <article>, which is nice, in case you need to have other pseudo-elements escape the <article>.

Since you always know the height of the double-line flourish, you can set a negative margin-top equal to half that height. Sass isn’t required, but I used it to show how this method doesn’t require guesstimate numbers.

I attempted to test the code you provided. I tried it off of Codepen… without using a custom font. My result was one solid line. Whereas the original method worked. I didn’t change the “magic number” when I was testing; so I don’t know if that will change.

by Pablo Villoslada Puigcerber, which doesn’t need a span, and I believe will work with various backgrounds too. And I’m actually using the linear gradient method (which Hugo mentions above) on my website’s footer, which I think is fairly easy to do and clean, if you don’t care about the extra span. And in this day and age, you shouldn’t care about the extra span, because removing it makes absolutely no difference to anything in the universe. :)

The second solution sets the width of p.fancy to 200%, then shifts the text back using text-indent of -50% (50% of 200% = 100%). That allows for using inline-block pseudo elements, instead of absolutely positioned ones.

The second solution sets the width of p.fancy to 200%, then shifts the text back using text-indent of -50% (50% of 200% = 100%). That allows for using inline-block pseudo elements, instead of absolutely positioned ones.

I decided to use the pseudo table-cell trick. I combined it with transforms to bring the top and bottom borders closer together. This means I don’t have overflow: hidden;, there are no “magic numbers” and the lines are exactly the width they need to be.

Because this trick does not rely on multiple backgrounds or linear-gradient it also works in a wider range of browsers. Even IE8 is acceptable :)

Hey Chris, I found that if I give the .fancy :after and :before pseudo lines a width of 100% the lines will be the same with of the fancy heading, or if a smaller percentage such as 80% is used it would be that percentage of the total width of the heading.

If the heading were to gain or be added more character the lines will adjust accordingly, which is where the overflow hidden could be an interesting solution to hide any excess lines that would extend beyond or outside the content container, or at that point it might be better to just use a smaller fixed pixel width value.

I recently had to the exact same thing. Firstly I did a brief search on how to do it but could not find anything (mostly because I didn’t know how this thing is called technically). So I started thinking. Initially I did with good old table with three td and the center one with white-space: nowrap and width: 1px. This worked fine but then I wanted to remove the tables and came up with this solution http://cdpn.io/BcnaE Hope it helps.

We have a pretty good* newsletter.

Email Address

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans Pro and Source Code Pro. It is made possible through sponsorships from products and services we like.