css - 在文本下方使用不同颜色的下划线

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/