Text-decoration line-through misaligned only on Safari/Mac

Question

I'm trying to add a line-through, in all browsers it works fine, except Safari.

It gets misalignment.

I'm not even using css, just an stag inside the html

<span class="price--old">
 <s>{value}</s>
</span>

Answer 1

There is an issue with the line through and del they both are't working in safari I came up with an solution

.price--old {
      width: 25px;
      display: flex;
      align-items: center;
    }
    .price--old::before {
      content: "";
      flex: 1 0 10px;
      border-top: 1px solid #111;
    }
    .old-price {
      margin-left: -25px;
    }

    <div class="price--old"><span class="old-price">200</span></div>

its working completely fine in safari and chrome