CSS Strikethrough Different Color From Text

We often see a horizontal line crossing on the text in such a way that it seems like the text has been canceled or abstained. These lines are called strikethrough. To create a strikethrough on the text while using HTML to format the document, HTML <strike> tags are used. Although creating a strikethrough using the <strike> tag is the standard method, the strikethroughs can also be created using the text decoration property inside the <span> tag.

This post will cover both methods to create the strikethrough with a different color than that of the text on which the strikethrough is applied.

Method 1: Through <strike> Tag

Creating the strikethrough on the text through the <strike> tag is simple. Let’s understand this with the help of an example:

• In the above code snippet, there is a <strike> tag in which there is the style attribute that defines the “red” color for the strikethrough. This will be the color of the strikethrough(not the text).
• Inside the <strike> tag, there is another tag, i.e., <span> tag, with the style attribute that defines the color of the text on which the strikethrough has to be applied as “black”.

The following output will be displayed on the web page interface:

Method 2: Using Text Decoration Property

It is also possible to create the strikethrough in a text by using only the text decoration property:

• In the above code snippet, there is the <span> tag created with the style attribute that defines the color of the strikethrough “green”.
• After that, there is the “text-decoration:line-through” CSS property that creates the strikethrough (horizontal line) in the output.
• Inside the main <span> tag, there is another <span> tag exactly like that created in the previous section of this article.
• In the <span> tag created inside the main <span> tag, there is the style attribute that defines the color of the text for which the strikethrough has to be created as “black”.

This will display the text colored in “black” color and strikethrough on the text colored in “green” color:

This is how strikethroughs are created and displayed on a web page interface.

Conclusion

The strikethroughs on the text in HTML can either be created by adding the <strike> tag that is used to create the strike and adding the color attribute inside it or by adding the text decoration property in the <span> tag and setting it equal to the line-through. Through these methods, the strikethroughs can be created and the colors for the strikethrough can be defined easily.