如何为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，使边框重叠。 / p>

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>

Answer 2

您可以将H1红色边框和黑色边框赋予其中的span。使用填充来固定边框的对齐方式。

＆＃13;

＆＃13;

h1 {
  border-bottom: 3px solid red;
  padding:3px 0;
}

h1 span {
  border-bottom: 3px solid black;
  padding:4px 0
}

＆＃13;

  <h1><span>heading</span></h1>

＆＃13;

＆＃13;

＆＃13;

Answer 3

h1 {
  border-bottom: 3px solid red;
  padding:3px 0;
  position:relative;
}
h1:before{
position:absolute;
width:100px;
height:3px;
background:#333;
content:"";
bottom:-3px;
}

<h1>heading</h1>