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;
}

Sponsor

Check out Ink Memories, the best tattoo and piercing shop in Quarteira, Portugal.