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