How to add a line behind post title, date or text

Today’s post will show you how to add a line behind text on your blog, in a similar way to strikethrough or deleted text but instead of the line going through the text it will appear behind it, like so

How to add a line behind post title, date header, gadget title, text or headings

This is usually seen as an image, but it is possible with a little bit of code. It’s a great way to make text stand out while maintaining a clean and simple style. This tutorial will show you how to add it to your post title but you can adjust the code to work with the text you are using like your post date header, gadget titles or heading tags.

How to add a line behind post title

1. Go to Template > Edit HTML. Press CTRL F / CMD F and search for post-title entry-title. This will appear twice in your template, look for the second instance. Use the numbering on the side to help you.

If you aren’t sure, take a look at the code about 20 lines above it. It should have <b:includable id='post' var='post'> and not <b:includable id='mobile-post' var='post'>.

You should see something similar to the following

<b:includable id='post' var='post'>
  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'> 
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
        </h3> 
    </b:if>

2. After <h3 class='post-title entry-title' itemprop='name'> add the following

<span>

Before </h3> add the following

</span>

3. Now we need to add the CSS. Find ]]> </b:skin> in your Template and add the following above it

/* STARTS LINE BEHIND POST TITLE - XOMISSE */

h3.post-title::before {
border-top: 1px solid #666; /* changes the border width, style, colour */
margin-top: 10px; /* moves the line up or down */
content: " ";
position: absolute;
left: 0;
right: 0;
z-index: 0; }

h3.post-title span {
background: #FFF; /* text background color to cover line */
padding: 0 20px; /* adds space to either side of the text */
position: relative;
z-index: 1 !important;
margin: 0 auto; }

.post-title.entry-title { text-align: center; }

/* ENDS LINE BEHIND POST TITLE - XOMISSE */

4. Save and make adjustments to the CSS in pink if needed.

5. To apply it to other text – add <span> tags around the text. Change the selector in the CSS to be for that text. Example – for the post date it might be h2.date-header instead of h3.post-title.

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

53 comments

    • Elaine M on

      Hello. Make sure to follow step 5 and replace the CSS selectors with the ones for your text. So change h3.post-title in the CSS to h2.date-header or .date-header to apply it to the date.

      Reply
  1. Lara on

    Hey,

    i love the idea of the line behind my post title. I am using a Blogger template, which isn’t from Blogger itself. I could only find (post-title entry-title) after (b) and not after (b). Is there any other place where i could but the ()?

    Reply
    • Elaine M on

      Hello Lara. Code is not allowed in the comments so I cannot see the code you have added. Please use a Gist or similar to share the code again. I’ve just had a look and you’re using a custom template so the code is completely different to that in Bloggers Template. Look for the h2 tags under post-heading in your template, you can use those instead.

      Reply
    • Elaine M on

      Thank you Erika! It would be the same, you’d have your heading or div tag (or whatever you wanted to identify that text as), the span tag and then the text. The CSS would be the same but the selectors (h3.post-title) would reflect your code instead.

      Reply
  2. Dyan on

    Anyway to disable this on a custom mobile template? It looks fab on my desktop version, but ends up looking like a strikethrough on my custom mobile.

    Reply
    • Elaine M on

      You can remove it from mobile by “un-doing” the CSS for mobile devices. For example adding border-top: 0px solid #000; for .mobile h3.post-title::before. Does that make sense?

      Reply
  3. allison on

    hi misse is there a code to adjust the width of the line so it isn’t so long & wide? otherwise code is perfect. I’ve been looking for this. Thank you!

    Reply
    • Elaine M on

      Hey, it will be the same width as what you are adding it to so you can change the width of that element to adjust it. For example, if you’ve added the line behind you post title you can adjust the width by adding h3.post-title {width: 500px;}

      Reply
  4. Ha on

    Hi Elaine!
    I did all of the above but the line still show through the text. And I did as your direction of finding ]]> but I can’t still find it. I found ]]> instead and pasted the CSS above it. Is that why it did not work? Thank you for your Post!! help me starting my blog a lot!!

    Reply
  5. Sophie on

    Hey Elaine, thank you so so much for sharing this! I have applied this to my date header, but I was wondering how I would be able to apply this to just my page titles as well? When I applied this to my post titles it also worked for the page titles, but I didn’t end up liking it for my post titles.

    Reply
  6. Taylor on

    I’m trying to add this to my sidebar widget titles, but I’m having trouble finding the selector for ALL of them in my template. I found the ones for specific widgets– is this something I’ll have to add to them individually?

    Reply
    • Elaine M on

      Hello Auburn. You’ll have to tweak it since you have an older Blogger Template that’s been customised. I can’t give you exact instructions since it isn’t a default Blogger template or one I’ve developed myself, therefore I’m not familiar with how it has been coded, but you’ll probably need to add a width, adjust the starting position and change the post title link from block to inline. Sorry I couldn’t be more help!

      Reply
  7. NINDY on

    Dear Elaine,

    Can you tell me what exact code to find when I want to apply this on date header? I mean, where should I put the “span” thing? It works on the post title and now I wanna apply it on the date header and can’t find the right place to put it ๐Ÿ™

    Thanks! ๐Ÿ™‚

    Reply
  8. deap on

    Hi Ellie,
    I’m having a hard time locating the title for each sidebar gadgets. ๐Ÿ™ And I don’t have any idea where to put . ๐Ÿ™ Can you please help me with this? And also, how would I make the entire background of my post date in white? There’s a thin gap between my post date and post title. ๐Ÿ™ Thank you so much, Ellie! ๐Ÿ™‚

    Reply
  9. Isabellouise on

    Hi Elaine! I’ve been having problems applying this code to my date header, I followed all the instructions and changed the CSS to apply to the date header. Also I was wondering how you can apply letter spacing inbetween the date header? Thank you so much for your help!

    Isabel Louise

    Reply
  10. Sudheeksha on

    I was able to add the line beside the date. Thanks a lot for the tutorial. But there’s a problem. I have a premade template for my blog and the date in it is displayed in lower case letters. I want to change the font as well as make it into upper case letters. Please help.

    Reply