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

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.