CSS Trick : Horizontal Line Behind Text

Horizontal Line After / Behind Text CSS

Days back I had a requirement that tested my CSS skills to the core. The requirement was as simple as this "Title text must have a border, that too behind them".  A simple representation of my requirement has been shown below.,

---------------------------------------------- TITLE ----------------------------------------------

Being aware of CSS's Border It looked like even 2 minutes would be more than enough to get this work done, But to believe I went through as many as 15+ techniques and 4 hours to achieve this effect. After applying the immense trial and error method I came up with the best approach to get the desired effect. The following steps should be done to get the effect as shown in the above representation.,

• Wrap your h1/h2 text of the title inside a span

1. <h1>
2.   <span>TITLE</span>
3. </h1>

• Add the below-mentioned CSS to your h1/h2 span

1. h1 span {
2.   background: #f2f0e4;
3.   padding: 0 20px;
4.   Text-align : Center; 
5. }

Where the background-color property must be the color of your .body, if not use background-image to set the .body's image.

• The Trickiest part is here.,

1. h1+* {
2.   border-top: solid 2px #adac97;
3.   padding-top: 28px;
4.   margin-top: -28px;
5. }

The above CSS sets the border to the immediate div, a span of the h1/h2 tag. We adjust the padding and margin to get this bordered top just behind the text. The below snapshot depicts the exact result of the above implementation.

Hope this share saves some time in your case.