Dotted underline TEXT

Question

I have a element (e.g. a label) with a fixed width and I want that only the text to be dotted-underlined. If a do the "trick" with border-bottom the whole box will be underlined

I think this explains my problem

Answer 1

Since label elements are inline by default, the problem is caused by making them inline blocks. This in turn is presumably an attempt to avoid using the most natural and most effective way of structuring a form, namely an HTML table. Just switch to table markup and use label inside td with no fancy settings, and the label elements will take the border you set on them, in their natural width.

Answer 2

You should wrap it into a span and add that border-bottom style to that span: http://jsfiddle.net/mrg9a/2/

Answer 3

You could wrap the text in <span> tags and then apply the style to the spans.

See the second element in this jsFiddle example.