How would you put a 1px solid border on a paragraphs of variable (font)size, spanning all the width including spaces.
That certainly would be tough. You’d probably have to go pixel-based font sizing and use a specific line-height that is equal to the height of your repeatable background.
I don’t get the difficulty… all I see in that screen shot are caps with an underline. Wouldn’t just using text-decoration: underline; work? Am I missing something?
@Mottie – specifically for a design like that, not really. Because the line is a certain distance from the words, I’m not sure you can adjust the underline.
@Mottie yeah I was wondering the same thing at first, but I think the spacing between the line and the text is a ‘big thing’.
Check this out – not too tricky :p : http://jsfiddle.net/TFW2E/1/
Edit: It’s not perfect though.
Edit: http://jsfiddle.net/TFW2E/4/ Line-height sorts it out
@jamy_za Nice work! And adding “padding-bottom” will adjust the distance.
Edit: Oh and I did discover that the specs include a “text-underline-position” (ref), but it doesn’t seem to allow adjusting it by a pixel distance.
Working with an extra span, line-height and padding-bottom seems to do the job.
@mottie, no – not necessarily a big thing, but you know… the details ;-)
Thanks all of you!
Not entirely solved, I can’t seem to find a way to decrease the distance with negative padding, relative positioning and line-height. Increasing it works fine tho.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".