Block / border-bottom only on text

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?

:slight_smile:

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.

Add display:inline to the block class.

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.

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.

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”; }