如何在HTML中为标题文本创建不同的下划线颜色？

在HTML中为标题文本创建不同的下划线颜色，可以通过CSS来实现。CSS提供了伪元素选择器::after和::before，可以在元素的内容之前或之后插入生成的内容。结合使用伪元素选择器和CSS属性border-bottom，可以为标题文本创建不同的下划线颜色。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  position: relative;
  display: inline-block;
}

h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 2px;
}

.red-underline::after {
  background-color: red;
}

.blue-underline::after {
  background-color: blue;
}

.green-underline::after {
  background-color: green;
}
</style>
</head>
<body>

<h1 class="red-underline">标题文本</h1>
<h1 class="blue-underline">标题文本</h1>
<h1 class="green-underline">标题文本</h1>

</body>
</html>

在上述代码中，我们使用了h1元素作为标题文本的示例，通过为h1元素添加不同的类名来实现不同的下划线颜色。通过CSS中的伪元素选择器::after，我们在h1元素的内容之后插入了一个生成的元素。通过设置position: absolute;将生成的元素定位到h1元素的底部，并使用border-bottom属性设置下划线的样式。不同的类名对应不同的下划线颜色。

请注意，这只是一种实现方式，您可以根据需要进行调整和修改。