<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%;
 }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.