CSS Trick : Horizontal line behind text !

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

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

Being aware about CSS's Border It looked even 2 minutes would be more than enough to get this work done, But to believe I went through as much as 15+ techniques and 4 hours to achieve this effect. After applying immense trial and error method I came 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 border to the immediate div, span of the h1/h2 tag. We adjust the padding and margin to get this border-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.

Add new comment

The content of this field is kept private and will not be shown publicly.