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

KP-C

Kevin Powell - Community•3y ago

Grant

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

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads