WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

How To Add Line On Either Side Of Your Text Headers With CSS

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 and various other CMS frameworks. If you need responsive design, SEO, speed optimisation or anything else in the world of digital, you can contact Silva Web Designs here; [email protected]

It’s good to share

Join the discussion

Related Posts

Related - CSS – Indenting the second line of LI (List Items)

CSS / 25th September 2023

CSS – Indenting the second line of LI (List Items)

Read More Related - Best Practices To Maximise The Effective Use Of Photos In HTML

HTML / 16th February 2022

Best Practices To Maximise The Effective Use Of Photos In HTML

Read More