WordPress / Web Development Tutorials
(Best WordPress Tutorials)

Silva Web Designs - Blog

Line On Sides – Headers

Today we will show you how to create 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 centred text. An easy thing to mock up an image, but a much more difficult thing to pull off in CSS because of the variable nature of the text (length, size, etc).

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

Instead, we used the ::before and ::after pseudo elements to create the left and right set of these 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.

.fancy {
  line-height: 0.5;
  text-align: center;
.fancy span {
  display: inline-block;
  position: relative;  
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  top: 0;
  width: 600px;
.fancy span:before {
  right: 100%;
  margin-right: 15px;
.fancy span:after {
  left: 100%;
  margin-left: 15px;
Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Join the discussion

Related Posts

Related - How to Hide / Disable the WordPress Admin Bar

Wordpress / 22nd January 2021

How to Hide / Disable the WordPress Admin Bar

Read More Related - How to Limit Text Length to X Lines Using CSS

CSS / 23rd December 2020

How to Limit Text Length to X Lines Using CSS

Read More