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.

Post last updated:

55 responses to “How to add a line behind post title, date or text”

  1. This is wonderful! Thank you so much!

  2. Farah

    Really confused this has’t worked for me trying to do it for the date but doesn’t change anything

    1. 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.

  3. Thank you so much for the tutorial but I’m not being able to change the background color of the text. The line shows through the text.

    1. Hello, I can’t get onto your blog to have a look for you. Make sure to wrap the text in span tags and that the selectors are correct for that text.

  4. 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 ()?

    1. 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.

      1. Hey ๐Ÿ™‚
        Thanks for the quick answer ๐Ÿ™‚
        I added the CSS after the skin etc. and i added the like this https://gist.github.com/anonymous/6c11bcf9226460a27822. Is this placement right? And do i have to change anything in the CSS Code, because it is still not working :/

        1. Double check that the CSS is before ]]> </b:skin>, use .post-heading h2 instead of h3.post-title. You may have to do some extra editing in the CSS to get it to fit your design perfectly since it is custom. The opening span in the gist (<span>) needs to go before <data:post.title/> ๐Ÿ™‚

  5. I love this code, and your blog. It’s been a great help to me.

    1. Thank you ๐Ÿ™‚

  6. Awesome blog. Thanks for the tutorial. Tried it and it worked. ๐Ÿ™‚

  7. Thank you of this tutorial, was so helpful :)!

  8. Wonderful tutorial, Ellie! Though I was wondering, if I wanted to have this kind of CSS, within the post, how would I do that, if it were possible?

    1. 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.

  9. thank you so much!!

  10. Thanks for the tutorial, it was a great help!!

  11. Hi

    Thank you so much for this…very helpful!

  12. Erika

    Hi, I wanted to use this for my sidebar, how would I do that?

    1. Find the gadget / widget titles in your template file and add the code. Then ad the CSS to your style.css file ๐Ÿ™‚

  13. Hi! Would if i can’t find step 3 on my html template? it’s not showing up when i search it!

  14. 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.

    1. 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?

  15. Thank youuuu! Very helpful and perfect for beginners ๐Ÿ™‚

  16. allison

    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!

    1. 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;}

  17. 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!!

    1. Hello. Code doesn’t work in the comments, please use a Gist instead to share code. CSS needs to be added above ]]> </b:skin> and not above <b:skin>.

  18. This worked perfectly, thank you! ๐Ÿ™‚

  19. Sophie

    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.

    1. Hey Sophie, I have a post going up on Monday that will show you how to apply it only to pages ๐Ÿ™‚

      1. Sophie Smith

        Ok great, thankyou!

  20. 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?

    1. Hello, yes unfortunately you do have to add it to each one in Blogger.

  21. Lei

    doesnt work for me! help im using the simple template from blogger

    1. Hello, I’ll need your URL to see what the issue is.

  22. It worked for me except for the fact that the line goes all the across the page. the only gap is where my date is. how can i fix that? thanks

    1. 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!

  23. 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! ๐Ÿ™‚

    1. Hello, the span tags are already wrapped around the date so you just have to apply the CSS ๐Ÿ™‚

  24. Thanks once again for another easy to follow tutorial! My blog is starting to look so pretty thanks to your fantastic tutorials ๐Ÿ™‚

  25. 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! ๐Ÿ™‚

  26. Thanks Elaine. I find your blog very informative and useful. Keep it up! Great job…
    Kamlesh Jolapara

  27. Shari

    Can this be done on WordPress too? I would love to know the code and how. Thanks Elaine!

    1. Hello, yes it can. The same method can be used but the selector you use will depend on what theme you are using, like in step 5.

  28. 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

  29. Is there a way to do this for just the date? I just want my date to be in between the lines and not the post title.

    1. Shireen L. Platt

      Sorry but my problem is finding ]]> in my HTML, nothing seems to be showing up.

      1. The tutorial here talks through the steps to find it.

    2. Hello, yes just use the date selector as explained in step 5.

  30. 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.

    1. Hello. Add text-transform: uppercase; to the date header span in CSS, it will change the text.

  31. Esma

    will this work on awesome inc template in blogger?

  32. I’m trying to put the line behind my date-header, but it is currently blocking my date. How do I have the date show in front of the line and have some white to hide the part of the line that’s directly behind the date? My blog is http://www.arizonagirl.com/. Thank you!

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up youโ€™ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.