How can custom underline to a text

Question

How to get border-bottom like in image. I've tried text-underline for a h1 tag using text-decoration property.

h1 {
  color: #F16A70;
  text-transform: uppercase;
  font-size: 30;
  font-family: oswald text-decoration: underline;
}
h1:after {
  width: 60%;
  border-bottom: 2px solid #F16A70;
}

<div>
  <h1>navigation</h1>
</div>

Answer 1

Here's one more solution:

h1{
    color: #F16A70;
    text-transform: uppercase;
    display: inline-block;
    font-size: 30;
    font-family: oswald;
    text-decoration: none;
    background-image: linear-gradient(to right, #F16A70, #F16A70);
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 50% 2px;
    transition: background-size .5s ease;
}
h1:hover {
    background-size: 100% 2px;
}

<div>
<h1>navigation</h1>
</div>

Animation of :after pseudo-element - to get it visible you need to set position attribute for both h1 and h1:after:

h1 {
    color: #F16A70;
    position: relative;
    text-transform: uppercase;
    display: inline-block;
    font-size: 30;
    font-family: oswald;
    text-decoration: none;
}
h1:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0;
    width: 30%;
    border-bottom: 2px solid #F16A70;
    transition: width 0.3s ease;
}
h1:hover:after {
    width: 100%;
}

<div>
<h1>navigation</h1>
</div>

Answer 2

You can do it with css3 linear-gradient().

Steps:

1. Create background image with linear-gradient().
2. Adjust its size with css background-size property.
3. Place it at the bottom left position of the element with background-position css property.

Necessary CSS:

h1 {
  background: linear-gradient(to right, #F16A70, #F16A70) no-repeat;
  background-size: 60% 3px;
  background-position: left bottom;
}

h1 {
  background: linear-gradient(to right, #F16A70, #F16A70) no-repeat;
  background-size: 60% 3px;
  background-position: left bottom;
  color: #F16A70;
  text-transform: uppercase;
  font-size: 30px;
  font-family: oswald, sans-serif;
  display: inline-block;
  vertical-align: top;
  padding-bottom: 10px;
}

<h1>Navigation</h1>