Better Strikethrough / Strikeout Style (good for prices) with CSS
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.light
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.