Grow your CSS skills. Land your dream job.

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

    del{text-decoration:line-through;}
    # 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.

    CSS:


    .heading {
    text-align:center;
    border-bottom:2px solid #d5d5d5;
    }
    .heading h1 {
    display:inline-block;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-weight:100;
    font-size:36px;
    position:relative;
    top:18px;
    background:#fff;
    padding:0 12px;
    }

    HTML:



    Heading Title



    Here’s a quick demo: http://theleggett.com/explanations/strikethrough/

    # 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: http://jsfiddle.net/ericrasch/jAXXA/1/

    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.
    http://jsfiddle.net/_bmd/PB5v2/

    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: http://css-tricks.com/line-on-sides-headers/

    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.

    *Edit!*

    For the interested I made a minimal example CodePen, IE8+: http://codepen.io/Merri/pen/HBvlh

    # June 10, 2013 at 7:53 am

    Another example without background requirement

    http://jsfiddle.net/attenzione/MeDDM/

    # October 3, 2013 at 1:26 pm

    I took @Merri‘s example and modified it a little: http://codepen.io/ericrasch/pen/Irlpm

    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.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".