Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y 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;

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

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
Was this page helpful?