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

Question

我需要在标题文本下方添加一个下划线 <h1>标签。但是文本下方的下划线颜色应该与其他颜色不同。

下面是我的要求的图像。

我尝试做的是放置两个 <div>并排设置不同的边框底部颜色。但这不是要遵循的最佳做法。

请对我的代码提出一些改进建议。

#left {
  border-bottom: 3px solid black;
  float: left
}

#right {
  border-bottom: 3px solid red;
  overflow: hidden;
  color: transparent;
}

<div id="container">
  <div id="left">
    <h1>My Heading</h1>
  </div>
  <div id="right">
    <h1>Transparent Text</h1>
  </div>
</div>

Answer 1

您可以给父级一个底边框，将标题设置为 inline-block 这样它的宽度包含在文本大小中，给标题一个底边框，然后将标题向下移动 3px 这样边界重叠。

h1 {
  display: inline-block;
  margin: 0;
  border-bottom: 3px solid black;
  transform: translateY(3px);
}

div {
  border-bottom: 3px solid red;
}

<div>
  <h1>heading</h1>
</div>