Grow your CSS skills. Land your dream job.

How to achieve this border on paragraphs?

  • # January 18, 2012 at 12:20 pm

    How would you put a 1px solid border on a paragraphs of variable (font)size, spanning all the width including spaces.

    Example: http://s.rough.dk/DQdG

    Scalable background-img?

    # January 18, 2012 at 12:32 pm

    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.

    # January 18, 2012 at 12:58 pm

    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?

    # January 18, 2012 at 1:00 pm

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

    # January 18, 2012 at 1:01 pm

    @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’.

    # January 18, 2012 at 1:04 pm

    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

    # January 18, 2012 at 1:11 pm

    @jamy_za Nice work! And adding “padding-bottom” will adjust the distance.

    http://jsfiddle.net/Mottie/TFW2E/5/

    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.

    # January 19, 2012 at 6:11 am

    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!

    # January 19, 2012 at 9:17 am

    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.

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

You must be logged in to reply to this topic.

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