text-decoration-line: line-through and pseudo not quite right

I am trying to style the strikethrough of some text, and neither quite works as I want.

    text-decoration-line: line-through;
    text-decoration-thickness: 24px;
    text-decoration-color: colour.$yellow;

    text-decoration-line: line-through;
    text-decoration-thickness: 24px;
    text-decoration-color: colour.$yellow;

The above gets quite close, however I wish for the line to overhang the text by about 5px each side. Don't believe this is possible?

   .strikethrough::after {
     content: '';
     position: absolute;
     top: 50%;
     left: -5px;
     right: -5px;
     border-top: 24px solid currentColor;
     transform: translateY(-50%);
   }

   .strikethrough::after {
     content: '';
     position: absolute;
     top: 50%;
     left: -5px;
     right: -5px;
     border-top: 24px solid currentColor;
     transform: translateY(-50%);
   }

The above doesn't work as my text breaks onto two lines, which it should as that's what the design dictates. The pseudo line is in-between both lines and hence I do not get the desired effect. This pen hopefully demonstrates the issue… https://codepen.io/grantsmith/pen/eYXWgOr

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

text-decoration-line: line-through and pseudo not quite right