如何在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>

- Pratyush

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>

- Michael Coker

Answer 2

您可以给H1标签内部的span元素设置红色边框和黑色边框。使用填充来修正边框的对齐。

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

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

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

- AG_

---

它在我的Chrome和Mozilla上看起来非常好，我正在使用Chrome版本57.0.2987.110。 - AG_

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>

- kashmira gilitwala