I read Ruben Schade's notes on underlining and wanted to add more, as adding a border-bottom and leaving at that seemed incomplete to me.

Modern

Of course, you could just use the modern choice. Here, I've shortened what Schade uses into one line of CSS (because I can). As noted, this is a fairly new feature so not every browser supports this.

.underline-me {
	text-decoration: underline red solid 3px;
}

Workarounds

Since some browsers don't support text-decoration, here are the alternatives I could think of.

border-bottom

The workaround Schade describes is using border-bottom, though it has a gap between the text in the line.

I am <span class="underline-me">underlining this yap</span> within the sentence.

.underline-me {
	border-bottom: red solid 3px;
}

::after

Probably the better way is to create an ::after element, which gets very close, but displays above the text (covering the letters 'g' and 'y').

I am <span class="underline-me">underlining this yap</span> within the sentence.

.underline-me {
	position: relative;
}
.underline-me::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 3px;
	background-color: red;
	left: 0;
	bottom: 2px;
}

::after in a container

If you use a container (in this case, two nested <span>s instead of just one), then you can get very close with the underline displaying below the text.

I am
<span class="underline-me-ctn">
	<span class="underline-me">underlining this yap</span>
</span>
within the sentence.

.underline-me-ctn {
	position: relative;
}
.underline-me {
	z-index: 10;
	position: relative;
}
.underline-me-ctn::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 3px;
	background-color: red;
	left: 0;
	bottom: 2px;
}

::after in a container with text stroke

And now if you add a stroke to the text via -webkit-text-stroke, you're pretty much there, though this may not be feasible in some situations (e.g. gradient or image background behind the text). Support for -webkit-text-stroke is not that much better than text-decoration though, so make of that what you will.

I am
<span class="underline-me-ctn">
	<span class="underline-me-outline">underlining this yap</span>
	<span class="underline-me">underlining this yap</span>
</span>
within the sentence.

.underline-me-ctn {
	position: relative;
}
.underline-me-outline {
	z-index: 5;
	position: absolute;
	left: 0;
	color: var(--background);
	-webkit-text-stroke: 0.3em var(--background);
}
.underline-me {
	z-index: 10;
	position: relative;
}
.underline-me-ctn::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 3px;
	background-color: red;
	left: 0;
	bottom: 2px;
}