Grow your CSS skills. Land your dream job.

setting border-top of the paragraph

  • # March 12, 2012 at 12:51 pm

    Hi,everyone
    I want to set the border at the top of the paragraph but instead it sets the border for every line of the paragraph.
    p.s. I only want to style achieve this effect in paragraph not by the other style
    Thanx in advance :D

    # March 12, 2012 at 1:13 pm

    You mean like this?: http://jsfiddle.net/Paulie_D/54AGE/

    # March 12, 2012 at 2:30 pm

    It’s possible that you have set your paragraphs to display:inline;. If you want what @Paulie_D is showing, you’ll have to make sure that the paragraph is set to display: block, which is its default type.

    # March 12, 2012 at 11:12 pm

    @Paulie_D: Thanx for the reply paulie. I actually want it to be more flexible. Here I have tried by your code http://jsfiddle.net/prathoven/hQRc9/ .Instead I want margin only at the top of the first line(i,e margin to be actual width of the first line not the whole paragraph) not over the box. :D….
    @Senff: Thanx for the nice comment :)

    # March 13, 2012 at 5:59 am

    That’s a different thing you want than what you initially said then.

    If you want to have the line at the top of the paragraph, use @Paulie_D ‘s example.
    If you want to have the line at the top of the first line of the paragraph only, you’ll have to wrap it in a div or span and apply the line to that.

    # March 13, 2012 at 7:56 am

    I’m thinking there might be something you could do with

    p:first-line

    but I can’t get it to work.

    # March 13, 2012 at 8:27 am

    Indeed you can’t use a border on the first-line pseudo-element. You CAN, however, apply a background image to it, so if you have an image of a line, maybe you want to use that (and set it to repeat-x, obviously). Something like this: http://jsfiddle.net/senff/Wd8ck/

    (for some reason it doesn’t always show right away — sometimes I have to switch to another tab and then switch back….hmm!)

    # March 13, 2012 at 9:47 am

    @paulie_D & Senff: I guess it can’t be achieved by fair codes….Thanx for your effort..really appreciate it!

    # March 13, 2012 at 10:15 am

    How about http://jsfiddle.net/drM75/

    # March 13, 2012 at 10:21 am

    Or using a span = http://jsfiddle.net/drM75/1/

    # March 13, 2012 at 11:01 am

    I’d want it to just ‘Work’ on a paragraph…I don’t want to have to add paragraphs, spans or whatever.

    I thought about a background gradient but I couldn’t get that to work either.

    As far as I can see the BG image option would be the only solution..which I did get to work but seemed a lot of hassle for a minor design element.

    # March 13, 2012 at 11:14 am

    Paulie, you must always have “content:”” for psuedo elements.

    http://jsfiddle.net/brightonmike/Wd8ck/1/

    # March 13, 2012 at 11:27 am

    @Brightonmike Actually, not in this case…

    I think you need it for ‘before’ and ‘after’ but not in this instance.

    http://jsfiddle.net/Paulie_D/j7Ua8/1/

    # March 13, 2012 at 6:01 pm

    @Brightonmike You are spot on, pseudo-elements must have the content property declared. However, :first-line is a pseudo-class, and they do not use the content property. /cc @Paulie_D

    # March 13, 2012 at 6:22 pm

    Not sure if that’s true @joshuanhibbert! Since we’re targeting the first line IN a P-element, I believe that makes it a pseudo element.

    A pseudo class would target the P-element itself (like P:first-child).

    I may be wrong here, but that’s how I always understood it.

Viewing 15 posts - 1 through 15 (of 24 total)

You must be logged in to reply to this topic.

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