在 HTML 中使用 CSS3 实现下划线文本效果需要使用伪类选择器 ::after 和 text-decoration 属性。
首先，在需要下划线的文本所在的元素中添加一个类名，比如 underline-text，然后在 CSS 中为该类名设置样式：
.underline-text {
position: relative;
display: inline-block;
}
.underline-text::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background-color: black;
}这段 CSS 代码会为类名为 underline-text 的元素添加一个横线效果。position: relative 是为了让 ::after 伪元素相对于该元素定位。display: inline-block 是为了让该元素可以设置宽度和高度。::after 伪元素的 content 属性设置为空字符串，表示该元素不会显示任何内容。position: absolute 表示该元素相对于其父元素进行定位。left: 0 和 bottom: -2px 分别表示该元素的左侧和底部与父元素的左侧和底部对齐。width: 100% 表示该元素的宽度与父元素的宽度相等。height: 2px 表示该元素的高度为 2 像素。background-color: black 表示该元素的背景颜色为黑色，也就是下划线的颜色。
下面是一个完整的例子：
<h3>这是一个下划线文本效果的例子</h3>
<p>在这个例子中，<span class="underline-text">需要下划线的文本</span> 使用了一个类名 underline-text，并且添加了一个 ::after 伪元素来实现下划线效果。</p>
<p>在 CSS 中，我们设置了该元素的 position 为 relative，这样 ::after 伪元素就可以相对于该元素进行定位。同时，我们也设置了该元素的 display 为 inline-block，这样可以为该元素设置宽度和高度。</p>
<p>需要注意的是，::after 伪元素的 content 属性设置为空字符串，这样该元素就不会显示任何内容。另外，我们还设置了该元素的宽度为 100%，这样下划线就可以占据整个元素的宽度。</p>
<pre>
.underline-text {
position: relative;
display: inline-block;
}
.underline-text::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background-color: black;
}
</pre>在实际使用中，我们可以根据需要修改下划线的颜色、粗细、位置等属性，以满足不同的设计需求。