The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

[Solved] CSS Trick for a horizontal type line behind text

  • # March 22, 2011 at 12:24 am

    Does anyone know of a css trick to make a horizontal type line appear behind text. To save on bandwidth, I don’t want to do an image replacement.

    The Movie Rating is the effect I am looking for

    # March 22, 2011 at 1:46 am

    Like this?

    wrap your text within <del>del</del> tags. If that doesn’t work, it’s probably because your css-reset is disabling it. To re-enable it, add the following to your css file.

    # March 22, 2011 at 8:52 am

    I’m not sure he means a delete line, probably more of a line that breaks when it goes behind the text, or like a lined paper effect?

    # March 22, 2011 at 9:46 am

    You could use relative positioning to offset the text over a border.


    .heading {
    border-bottom:2px solid #d5d5d5;
    .heading h1 {
    font-family:Georgia, "Times New Roman", Times, serif;
    padding:0 12px;


    Heading Title

    Here’s a quick demo:

    # March 22, 2011 at 1:41 pm

    Thanks TheLeggett ~ I ended up doing something similar, but I used a hr tag in order to set the width less than 100%. I also set the width of the heading & adding a bg color so that the text showed up nicely over top of the line….I’ll post a link when I take the site live….I just have to finish wrestling with a jquery issue & then the site will be done! WooHoo!

    Thanks for everyone’s help.

    # March 22, 2011 at 1:57 pm

    @4bco – just a heads up, the hr tag has terrible cross-browser compatibilities. Make sure to do lots of testing!

    # March 23, 2011 at 3:00 pm

    Thanks Doc, I’ll be sure to do that & if it doesn’t work, I’ll use the border trick

    # August 16, 2011 at 3:28 pm

    I think I might have a pretty nice solution. I needed this exact style a few days ago and found this forum post. After a lot of playing around, I came up with this:

    I prefer it over Leggett’s solution since it doesn’t any extra div wrappers (though I did need a span within the H2 tag).

    Let me know if this works over if I can improve upon it in any way.

    # April 20, 2013 at 6:36 am

    I built from Eric’s model and cleaned it up a bit so that no background color is needed. I did have to keep the span, though.

    The trick with my solution is that you’ll have to manually adjust the margins for the line (it’s pushed from opposite interior box walls). If you’re coding each page manually, that shouldn’t really be a problem, as you can get pretty close within 3 guesses.
    If you’re trying to build a page that can populate data automatically, then I’d suggest you query for the length of the data, then set something like 0.5*length “em” to the margins. Obviously, YMMV, and you’ll probably have to do some tinkering to get it perfect.

    # April 20, 2013 at 7:05 am

    This topic was just covered on the site:

    There are solutions that don’t require span element, have a transparent background and are also dynamic so you don’t need to tinker anything.


    For the interested I made a minimal example CodePen, IE8+:

    # June 10, 2013 at 7:53 am

    Another example without background requirement

    # October 3, 2013 at 1:26 pm

    I took @Merri‘s example and modified it a little:

    Now there’s no span and no background. This was definitely the best solution for me and the sites where I have this implemented.

    Thanks, @Merri!

    # January 23, 2014 at 12:40 pm

    Merri. Thanks. I tried your codpen for the line behind text and it worked beautifully and with no spans! Amazing.

    # March 6, 2014 at 11:29 am

    @EricRasch Thanks for all your examples.

    # August 30, 2015 at 5:05 pm

    Funnily enough I just finished playing with flexbox for this exact use case when I came across @EricRasch‘s great pen featured on the home page! Mine requires IE10+ – but gives you the full flexibility of flexbox for sizing and you can have shadows etc overflowing the element :)

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed