I've used CSS to create titles with a double line running from the right had side of the title but am struggling to figure out how to get the right hand side of the lines to line up. enter image description here

The CSS I've used looks like this: span.fancy:after { content: ""; position: absolute; height: 5px; border-bottom: 1px solid #777272; border-top: 1px solid #777272; top: 0; width: 35em; margin-top: .35em; margin-left: 15px; }

The page I'm working on can be found here: https://diviplayground.com/bkia/

2 Answers 2


Not the cleanest or the best way but, you could simply use left:0; and right:0; to make the border 100% of the content, then wrap your text with another tag with position relative, z-index and add background to overlap the border.

Here a example: https://jsfiddle.net/23x380kh/

You can change the padding-right value to modify the spacing you want.

  • Excellent! It worked perfectly. Thanks for taking the time to demonstrate your answer, I'm still getting the hang of the more tricky side of CSS so it really helps to have an example.
    – robhob
    May 3, 2017 at 18:19

Since the lines are part of the title (meaning that you entered the ::after to the .fancy class) it is only logical to take into account the width of the title.

I think you should add the ::after to the h2 rather thatn the inner span element. You can then give a background color to the span.fancy so that it comes on-top of the lines and hide them with the background-color.

Not the answer you're looking for? Browse other questions tagged or ask your own question.