Skip to main content
knackforge blog knowledge base

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.