block / border-bottom only on text

[rhgiant]

Hello,

Quite a typical case of useless <span> I'm sure:

<p class="block">
Some text
</p>

.block {
border-bottom: 3px solid white;
}

The whole width of the <p> is underlined, not just the string it contains. How can I avoid <span>s?

[chris.upjohn]

The easiest and most semantic way to underline text is to use text-decoration with a set font color as using <span> elements is quite redundant.

[_Nikhil]

Add display:inline to the block class.

[rhgiant]

But I want it to display as a block.

[Stevie D]

But I want it to display as a block.

Then you'll either have to use a <span> or underline it ... of those two, a <span> would generally be a better option.

[RyanReese]

Then you'll either have to use a <span> or underline it ... of those two, a <span> would generally be a better option.

Exactly. I guess as a last resort scenario you *could* apply a background image that has the "border" on it, although there really shouldn't be a reason why the two options Steve mentioned shouldn't work.

[dresden_phoenix]

it really depends as to WHY you need this to be a block element.
if its because of giving explicit dimensions, display:inline-block ; might do what you want.

If you just simply want a line break this might suit your needs:
.block {
border-bottom: 3px solid white;
display:inline;
}
.block:after, .block:before{ content:"\D\A"; }