How to Change Strikethrough Color in CSS?

In CSS3+, you can use the text-decoration-color property (which has good browser support) to set a different color of the strikethrough line than that of the text. For example:

.foo {
    color: black;
    text-decoration-line: line-through;
    text-decoration-color: red;
}

For the text-decoration-color property to have an effect, you must specify the required text-decoration-line property along with it. You may also, alternatively, use the shorthand text-decoration property to specify both property values in one go:

.foo {
    color: black;
    text-decoration: red line-through;
}

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.