Wie kann ein Text individuell unterstrichen werden

So erhalten Sie einen Rand unten wie im Bild. Ich habe Textunterstreichung für ein h1Tag mit text-decorationEigenschaft versucht.

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>

Lösung des Problems

Hier noch eine Lösung:

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>