JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div class="text">
        SOFT XXX <br>
        MEDIA
    </div>
</div>

CSS

.box {
    position: relative;
    overflow: hidden;
}
.text {
    position: relative;
    float: left;
}
.box:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background: red;
    top: 50%;
    margin-left: -5px; /*  насколько линию сдвинуть влево? */
}