CSS Strikethrough: How to Add and Style Line-Through Text

Key takeaways

Strikethrough adds a line through existing text, making it appear crossed out, using cascading style sheet (CSS), a critical tool in creating modern, responsive websites. 

• Strikethrough is set by using the “text-decoration-line:” CSS property followed by “line-through”. 

• The text-decoration property also allows you to change the color, size, thickness, and style of the strikethrough. 

• You can use CSS strikethrough to signal that text is incorrect or no longer relevant, like for a sold-out concert. 

Learn more about the CSS strikethrough, how to write the code that performs the strikethrough, and how to style your HTML using CSS. If you're ready to accelerate your career as a front-end developer, try the Meta Front-End Developer Professional Certificate. In just seven months, you can build skills creating responsive websites with HTML and CSS, learning Bootstrap CSS, and using the React framework. 

What is strikethrough in CSS?

Strikethrough is a typographical property you can use to create a “crossed out” effect by running a horizontal line through text, and in CSS, this means styling text on a webpage with this effect. Strikethrough looks like [1]:

Strikethrough is a common feature in word processing software, such as Microsoft Word, Google Docs, and Pages. While you can use strikethrough to create the effect of crossing out a list or whimsically deleting text, it also helps with revisions and in suggesting code deletionse in a programming environment. 

Since CSS is the language used to style HTML webpages, you need to follow certain rules to style text with a strikethrough line. In CSS, strikethrough is part of the text-decoration-line or the shorthand text-decoration property, depending on how specific you need your styling to be [2]. 

How to add a strikethrough in CSS

To add a strikethrough in CSS, you can use the text-decoration property known as line-through. Say you run a website for a concert venue, and your hit show has just sold out. This is information you want to communicate to viewers by crossing out the previous text and replacing it with “sold out,” as it is a good promotion for the band. 

If your HTML for the concert venue website looked something like this before:

<p>We have only 20 tickets left!</p>

You would add the utility class .line-through (or however you’d like to name it) to the p element to have:

<p class="line-through">We have only 20 tickets left!</p>

<p>SOLD OUT!</p>

Then, you would add the following CSS to style this HTML on your website:

.line-through {

text-decoration: line-through;

}

Now your website text would look as follows:

SOLD OUT!

What is the CSS syntax for strikethrough?

You can use two different CSS syntaxes to create the strikethrough effect:

1. text-decoration: line-through

2. text-decoration-line: line-through

Understanding text-decoration in CSS

The CSS text-decoration property is a shorthand CSS property that allows you to control text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness all in one property [2]. 

With the text-decoration property, you can add underlines, overlines, and line-throughs, change the color, change the line style (dotted or wavy, for example), and change the thickness of the lines. While all of these properties have their own syntax, text-decoration allows you to control them all with one line of code [3]. 

What is `text-decoration-line` in CSS?

The CSS property text-decoration-line is the long-form way to style underlines, overlines, and line-throughs on text. Some ways you can use text-decoration-line include:

Underline

An underline looks like this. You can create an underline using:

text-decoration-line: underline;

Overline

You can create an overline using:

text-decoration-line: overline;

Line-through

You can create a line-through using:

text-decoration-line: line-through;

Styling options for CSS strikethrough 

You can add additional styling to your CSS strikethrough by using the text-decoration property or the text-decoration-style property. For example, using the venue website example above, say you want to style the strikethrough as red. You can do so using the following CSS:

.line-through {

text-decoration: line-through red;

}

Now your website text would look as follows:

You can also add other style properties, like making the strikethrough wavy or dashed:

.line-through {

text-decoration: line-through blue wavy;

text-decoration-thickness: 2px;

}

Your text should now look like:

Additional CSS styling options

Some other options for styling CSS underlines, overlines, and line-throughs include:

• text-decoration-style: solid;

• text-decoration-style: double;

• text-decoration-style: dotted;

• text-decoration-style: dashed;

• text-decoration-style: wavy;

Using strike tag in HTML

You can also use the HTML strike tag to create a strikethrough effect on a webpage. Using the same example above, you have the HTML:

<p>We have only 20 tickets left!</p>

To add the same strikethrough as the CSS, you can use the strike tag <s>. The HTML would now look like this:

<s>We have only 20 tickets left!</s>

<p>SOLD OUT</p>

This will render the same effect as the CSS method, and you could even style it by applying CSS to the <s> tag. So, if you wanted to make it red:

s {

  text-decoration-color: red;

}

Getting started in front-end development with CSS

The path to becoming a front-end developer varies for everyone, as some developers earn their bachelor's degree, while others are self-taught and gain experience through courses and their own projects. Whatever your path, you'll need to build skills in web development programming languages like:

• HTML

• CSS

• JavaScript

You can start building those skills today by creating your own website or a mock-up of an existing one. As a front-end developer, you’ll use CSS to control fonts, backgrounds, and colors, and it is also the key to creating responsive web design for desktops, laptops, tablets, and smartphones. 

Explore our free resources for front-end developers

Stay connected to industry trends, career resources, and skill-building materials by subscribing to our weekly Career Chat newsletter on LinkedIn. Then, explore our free resources for front-end developers:

• Hear from a fellow learner: How This Self-Taught Web Developer Went Straight to a Master's Degree 

• Watch on YouTube: Web Development Skills: Ultimate Guide for Beginners 

• Study terms: Web Development Terms and Definitions 

With Coursera Plus, you can learn and earn credentials at your own pace from over 350 leading companies and universities. With a monthly or annual subscription, you’ll gain access to over 10,000 programs—just check the course page to confirm your selection is included.

Build job-ready skills with Coursera Plus

Start 7-day free trial

• 
• 
• 
• 

Start 7-day free trial