JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <span class="strike">the strike through line is not vertical centered</span><br>
    <span class="strike-center">the strike through line is vertical centered</span>
</p>

<p>
    <span class="strike">x</span>
    <span class="strike-center">x</span>
</p>

CSS

.strike {
    text-decoration:line-through;
}

.strike-center {
    position: relative;
    white-space: nowrap; /* would center line-through in the middle of the wrapped lines */
}

.strike-center:after {
    border-top: 1px solid #000;
    position: absolute;
    content: "";
    right: 0;
    top:50%;
    left: 0;
}