CSS Strikethrough

If you’re looking to add a strikethrough effect to your text in CSS, there are a few different ways you can do it.

The first way is to use the <del> tag. This is a semantic HTML tag that indicates that the enclosed text has been deleted from a document. To style the tag with CSS, you can use the text-decoration property set to line-through:

del {
  text-decoration: line-through;
}

Alternatively

/* Or if you want to be more specific */
del {
  text-decoration: line-through; /* Same as above */
}

You could also use the CSS pseudo-element selector ::after and insert some generated content with the content property. Then you can use the text-decoration property on that generated content.

Here’s an example:

.strikethrough::after {
  content: "~~";
  text-decoration: line-through;
}

Another option is to use the CSS border property. By setting the border-style to dotted and applying it to an element that wraps your text, you can create a similar strikethrough effect:

.strikethrough {
  border-style: dotted; /* Or dashed */
}

Finally, you could also use the background-image property to insert a strikethrough image.

.strikethrough {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><line x1='0' y1='2' x2='4' y2='2' style='stroke:black;stroke-width:1'/></svg>");
  background-repeat: repeat-x;
}

These are just a few of the ways you can add a strikethrough effect to your text with CSS. Choose the method that works best for your project.