CSS Strikethrough Text and Related Effects Tutorial

cssoverlayCascading Style Sheets are used to define the way webpages look. Whereas HTML creates and gives structure to your site’s content, CSS is there to format it and make it visually appealing. Without it, you’d be left with a dull and drab page that looks like it stepped right out of the 90s! Default fonts, bright blue links… all function, no form.

One of the most basic CSS properties is the text-decoration. With this, you can use the underline, overline, or line-through values to enhance your text. In this guide, we’ll be going over how to use the line-through value to create a strikethrough effect on text, and how to manipulate it for other cool effects.

For more general web design help, consider taking a quick, hour-long CSS course, or learn HTML from scratch with this workshop.

How to Add CSS to Your Webpage

There are three ways to deploy CSS: externally, internally, and inline.

An external style sheet is written separately, with no HTML tags, saved as a .css, and linked within the <head> section of your HTML document.

<head>
<link rel="stylesheet" type="text/css" href="yourstylesheet.css">
</head>

An internal style sheet is written within your HTML document, between a <style> section placed within the <head> section.

<head>
<style>
p {margin-left:10px;}
h1 {color:blue;}
h2 {color:red;}
</style>
</head>

An inline style is implemented using a style attribute within an HTML tag. This is not recommended, as it can be tedious to alter the style of every HTML element within a document.

<p style="color:green;margin-right:10px;">Example paragraph!</p>

CSS Syntax

Before we explore how to implement the strikethrough effect, it’s important to understand the syntax of CSS. For a more substantial overview, consider trying out one of Udemy’s many web design courses, like this one on basic, intermediate, and advanced CSS training.

Consider the following:

Udemy CSS Strikethrough Tutorial

In the image above, p is the selector, meaning the HTML element you want to format. In this case, p for anything that will go between the <p> tags on your webpage.

The statements within the curly braces, like color:green; and font-style:italic; are declarations, made of up a property: color and font-size, and a value: green and italic.

How to Create a Strikethrough

This is what strikethrough text looks like!

To create text with a strikethrough effect in CSS, you use the line-through value in the text-decoration property. You can do this inline, or with a style sheet, with the same effect.

Inline

<p style="text-decoration:line-through;">This text will appear with a line across it!</p>

Style Sheet

p {text-decoration: line-through;}

If you use the above rule in a style sheet, and deploy that style sheet in an HTML document (internally or externally), any text within the <p> tag in your HTML document will appear with a line through it.

Change the Strikethrough Color

Sometimes, the strikethrough effect can make text hard to read. This is unfortunate if you’re using it in a way where the line-through text should be easily legible, as in a sample copy editing document or a manuscript with annotations.

Do you see what I mean? Kind of irritating, right?

Luckily, there’s a way to change the color of the actual strikethrough line, independent of the text color. It can make the text behind the line slightly more readable if the line is a lighter color, like red.

Using the Span Element – Style Sheet

One way to do this is by using the <span> element to add a border on your text, and manipulate its position so that it appears the same way a strikethrough line does when you use the text-decoration property.

Let’s say you want everything between the <p> tags on your webpage to appear as black text, size 20px, with a red strikethrough. Input the following into your HTML document:

<p>
This text will appear with a red line through it.
<span></span>
</p>

In your CSS style sheet, whether it’s external or internal, you want to input the following:

p {
    font-size: 20px;
    position: relative;
    display: inline-block;
}

span {
    position: absolute;
    width: 100%;
    border-top: 1px solid red;
    left: 0;
    top: 50%;
}

The result will appear as follows:

Udemy CSS Strikethrough Tutorial 2

Because you’re using the <span> element to create a partial border and simulate a strikethrough effect, you can manipulate its appearance in the CSS. For instance, if you want to make your text bigger – let’s say, 35px – and you want the strikethrough line to appear thicker to accommodate, you could simply change the value in the border-top property to be 2px rather than 1px.

The result:

Udemy CSS Strikethrough Tutorial 3

Or, for an even more interesting strikethrough line, you can change the solid value to dashed. Just for good measure, set it to 3px too! Your CSS for the span selector should look like this:

span {
    position: absolute;
    width: 100%;
    border-top: 3px dashed red;
    left: 0;
    top: 50%;
}

And your end result should look like this:

Udemy CSS Strikethrough Tutorial 5

The text in the <p> tag has been changed, of course. To learn more about different CSS properties and values, check out this advanced CSS training course.

Using the Span Element – Inline

To implement this effect inline, simply use the following:

<span style="text-decoration:line-through; color:red;">
<span style="color:black;">This text will appear with a red line through it.</span>
</span>

Creating a Diagonal Strikethrough Line

There’s no easy way to do this, but web developers in this Stack Overflow thread have experimented with some functional substitutes. One method involves horizontal rules, or the <hr> tag.

In your HTML document, input:

<html>
    <body>
        <hr />
        This text will appear with a diagonal line through it.
    </body>
</html>

For your CSS, input:

HR
{
   width: 50px;
   position: absolute;
   background-color: #000000;
   color: #000000;
   border-color: #000000;
   transform:rotate(-7deg);
   -ms-transform:rotate(-7deg);
   -moz-transform:rotate(-7deg);
   -webkit-transform:rotate(-7deg);
   -o-transform:rotate(-7deg);
}

The issue with using this method is you have to manually input the transformation values to make sure your strikethrough line is as long as, and angled, precisely the way you need it to be.

With more practice, maybe you can come up with your own creative method of simulating a diagonal strikethrough line in CSS, and other useful effects. For starters, try out this beginner’s HTML and CSS class, or this crash course on the fundamentals of HTML and CSS.