Better Strikethrough / Strikeout Style (good for prices) with CSS


1 minute read

Listen to article
Audio generated by DropInBlog's Blog Voice AI™ may have slight pronunciation nuances. Learn more

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.

« Back to Blog