This code will show you how to make a more style and readable "strikeout" style of text. Good for showing pricing discounts etc.
The strike line adjusts in thickness to match your font size and it slightly transparent to help with readability.
See the Pen Better Strikethrough / Strikeout Style (good for prices) by Jesse Schoberg (@schoberg) on CodePen.
You can see the code in the above pen. In short we've removed the text-decoration
and used the ::before
pseudo-element to create a nice angled line that even has rounded ends that you can observe at larger font sizes.