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
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.
@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 :)
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.
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!)
@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
@Senff Yeah, you are right. I am now stumped as to what I was thinking when I wrote the above comment. These things happen, thanks for the clarification!
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
display:inline;. If you want what @Paulie_D is showing, you'll have to make sure that the paragraph is set todisplay: block, which is its default type.@Senff: Thanx for the nice comment :)
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.
(for some reason it doesn't always show right away -- sometimes I have to switch to another tab and then switch back....hmm!)
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.
http://jsfiddle.net/brightonmike/Wd8ck/1/
I think you need it for 'before' and 'after' but not in this instance.
http://jsfiddle.net/Paulie_D/j7Ua8/1/
:first-lineis a pseudo-class, and they do not use the content property. /cc @Paulie_DA 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.
(still confused about that thing about the need for "content:" though....)
http://jsfiddle.net/wPDFQ/
http://jsfiddle.net/d2aDj/
lol I kid I kid
Don't think I could be @thehen 's answer :D
Just in case this wasn't already clear: @thehen has the best solution by far, everything after that is pure style ;)
like this?
http://jsfiddle.net/NM8ZD/2/embedded/result/