在文本下用不同颜色加下划线

Question

我正在尝试编写CSS来获得此设计

到目前为止，这是我的CSS：

.exp {
    font-weight: 300;
    display: inline-block;
    padding-bottom: 15px;
    position: relative;
    margin-bottom: 30px;
    font-style: italic;
}
.exp:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0%;
    border-bottom: 1px solid #219b65;
}

HTML：

<h1 class="exp">Experience</h1>

这是JSFIDDLE 知道怎么做这个吗？我几年前做过但是再也无法恢复工作了！

Answer 1

这是一个完整的答案。根据您的需要调整宽度。

.FromTheFounder {
    font-weight: 300;
    display: inline-block;
    padding-bottom: 15px;
    position: relative;
    margin-bottom: 30px;
    font-style: italic;
}
.FromTheFounder:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 13px;
    left: 0%;
    border-bottom: 1px solid #219b65;
    z-index: 1;
}

.FromTheFounder:after {
    content: "";
    position: absolute;
    width: 300%;
    height: 1px;
    bottom: 13px;
    left: 0%;
    border-bottom: 1px solid #ccc;
}

https://jsfiddle.net/vjhg7mna/

Answer 2

如果您知道容器的宽度，或者希望下划线仅跨越一定宽度，那么Brett的答案将完美无缺。如果您希望下划线填充可用空间，则需要两个元素 - 一个用于全宽下划线，另一个用于突出显示的下划线。

使用::after代替exp-title并将content属性设置为＆＃34;体验＆＃34;，但这可能是一个元素。用户不太友好。

请注意，我的下划线显着更胖（5px），因此效果更明显。

＆＃13;

＆＃13;

.exp {
  position: relative;
  font-style: italic;
  border-bottom: 5px solid #ccc;
}

.exp-title {
  display: inline-block;
  border-bottom: 5px solid #f00;
  font-weight: 300;
  padding-bottom: 15px;
  margin-bottom: -5px;
}

＆＃13;

<h1 class="exp">
  <span class="exp-title">Experience</span>
</h1>

＆＃13;

＆＃13;

＆＃13;

Answer 3

对于它的价值，这里的另一个选择是在伪元素上使用线性渐变背景，而不是实际边框。

此处的缺点是此选项无法灵活地自动匹配h1中任意长度文本的宽度。但话说回来，如果你有几个标题，并且你希望下划线的突出显示部分对于所有标题都是相同的宽度，无论文本长度如何，这可能是要走的路。

.some-container {
  position: relative;
  padding-bottom: 15px;
}
.exp {
  font-weight: 300;
  display: inline-block;
  margin-bottom: 0;
  font-style: italic;
}
.some-container::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0%;
  background-image: linear-gradient(to right, steelblue, steelblue 25%, lightgray 25%, lightgray);
}

<div class="some-container">
  <h1 class="exp">Experience</h1>
</div>