Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #32083
    4bco
    Participant

    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

    #54685
    jamygolden
    Moderator

    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;}
    #54657
    TT_Mark
    Member

    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?

    #54659
    TheLeggett
    Member

    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/

    #54636
    4bco
    Participant

    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.

    #54622
    TheDoc
    Moderator

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

    #54438
    4bco
    Participant

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

    #85082
    EricRasch
    Participant

    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.

    #132484
    _bmd
    Member

    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.

    #132492
    Merri
    Participant

    This topic was just covered on the site: https://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

    #138193
    axeriano
    Participant

    Another example without background requirement
    http://jsfiddle.net/attenzione/MeDDM/

    #151970
    EricRasch
    Participant

    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!

    #161031
    pxforti
    Participant

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

    #164928
    mario
    Participant

    @EricRasch Thanks for all your examples.

    #207381
    jonnyscholes
    Participant

    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 :) http://codepen.io/jonnyscholes/pen/pjzyXO

Viewing 15 posts - 1 through 15 (of 15 total)
  • The forum ‘CSS’ is closed to new topics and replies.