- This topic is empty.
-
AuthorPosts
-
March 22, 2011 at 12:24 am #32083Historical Forums UserParticipant
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.
March 22, 2011 at 1:46 am #54685jamygoldenMemberLike 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 #54657TT_MarkMemberI’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 #54659TheLeggettMemberYou 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 #54636Historical Forums UserParticipantThanks 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 #54622TheDocMember@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 #54438Historical Forums UserParticipantThanks 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 #85082EricRaschParticipantI 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 #132484_bmdMemberI 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 #132492MerriParticipantThis 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
June 10, 2013 at 7:53 am #138193axerianoParticipantAnother example without background requirement
http://jsfiddle.net/attenzione/MeDDM/October 3, 2013 at 1:26 pm #151970EricRaschParticipantI 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 #161031pxfortiParticipantMerri. 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 #164928marioParticipant@EricRasch Thanks for all your examples.
August 30, 2015 at 5:05 pm #207381jonnyscholesParticipantFunnily 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
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.