自定义如何为文本加下划线

Question

如何在图像中获得边框底部.我已尝试h1使用text-decoration属性的标记的文本下划线.

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

这是另一个解决方案:

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>