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

Question

I'm trying to write CSS to get this design

Here's my CSS so far:

.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>

And here's the JSFIDDLE Any idea how to go about doing this? I did it a few years ago but couldn't get it to work again!

Answer 1

Here's a complete answer for you. Adjust widths to you needs.

.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's answer will work perfectly if you know the width of your container, or want the underline to only span a certain width. If you want the underline to fill the available space, you'll need two elements - one for the full-width underline, and the other for the highlighted underline.

This would also be possible with one element using ::after in place of exp-title and setting the content property to "Experience", but that's not very user-friendly.

Note that I've made the underline significantly fatter (5px) so the effect is more obvious.

 .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; } 

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

Answer 3

For what it's worth, another option here is to use a linear-gradient background on a pseudo element, instead of an actual border.

The disadvantage here is that this option doesn't have the flexibility to automatically match the width of any arbitrary length of text in your h1 . But then again, if you've got several headers, and you want the highlighted portion of the underline to be the same width for all of them, regardless of text length, this may be the way to go.

 .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>