Style text-decoration differently or make a border on each line

I'm having a quite specific CSS problem. I'm trying to get a paragraph of text have a border-bottom: 1px dotted on each line while at the same time avoid writi开发者_StackOverflowng superfluous markup.

Clearly p {border-bottom:1px dotted #000;} doesn't work since it will only set a border-bottom on the last line of the p tag. On the other hand, text-decoration gives the correct underlining, but can't be styled dotted.

So basically I'm wondering if there's a better way of doing it than figuring out when there's a new line and add span and then style that with border-bottom and ending up with a seriously messy markup.

You could try making a background that simulates a dotted line and then use that on your paragraphs. Just make sure its height has the same value as the paragraph's line-height attribute so it matches the rows properly.

For example, if you want your line to be a 3px dash with a 1px space, you would then make a 4px wide by X pixels high image (where X of course is the height of your text line), and just have it repeat.

Hope this helps.

Since border-bottom will only work on the element identified by its selector, I can't see another way of doing this apart from wrapping the text inside every <p> with <span> tags (or another). You could avoid annoying glitches by targeting span tags immediately inside all p tags:

p > span:first-child {border-bottom:1px dotted #000;}

<p><span>this is a paragraph with a first-child span and a dotted underline<span></p>
<p>this is a paragraph with no first-child span <b>this is bold</b> <span>and this span is ignored<span></p>