<span class="gradient-underline">This will be underlined</span>

.gradient-underline {
    padding-bottom: 4px;
    position: relative;
    text-decoration: none;
}

.gradient-underline::after {
    background: #f00;
    background: linear-gradient(to right, transparent 0%, #f00 50%, transparent 100%);  
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
 }