CODEWITHSUNDEEP
css
Elaine Byene
Elaine Byene

Reputation: 4142

Underline with different color under text

I'm trying to write CSS to get this design

enter image description here

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!

Upvotes: 2

Views: 309

Answers (3)

cjl750
cjl750

Reputation: 4629

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>

Upvotes: 1

Scott
Scott

Reputation: 5369

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>

Upvotes: 3

Brett East
Brett East

Reputation: 4322

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/

Upvotes: 4

Related Questions