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.

Buy me a coffeeBuy me a coffee

55 Comments

    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.

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

  2. 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. 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/> 🙂

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

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

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

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

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

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

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

  10. 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! 🙂

  11. Thanks once again for another easy to follow tutorial! My blog is starting to look so pretty thanks to your fantastic tutorials 🙂

  12. 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! 🙂

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

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

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

Sorry, comments are closed!