How to strikethrough/add a line through on text in HTML/CSS?

HTML and CSS are the foundations of every web application. Web developers use HTML and CSS to build the beautiful user interfaces we see on websites. HTML offers the page structure, while CSS provides the visual and aural layout for various devices. In this article, we’ll look into strikethrough or line-through, one of the essential effects. We’ll also examine how simple HTML and CSS can create a strikethrough/line-through effect on text.

What are HTML and CSS?

We use HTML language to define the layout or structure of Web pages. It allows developers to create web documents containing headers, text, tables, lists, images, etc. On the other hand, CSS is a language used to describe the appearance of Web pages, such as color, layout, and fonts. It allows the presentation to operate on various devices, including giant displays, tiny screens, and printers. CSS is not dependent on HTML, and we may use it in conjunction with any XML-based markup language.

What are Semantic Elements in HTML?

CSS is great for styling but not so good for providing meaning to our content. That’s what HTML semantic tags are for. A semantic element clearly describes its importance to both the browser and the developer.

Elements like header, nav, section, article, aside, and footer behave similarly to the div HTML elements. They organize other items into page parts. Whereas a div tag may include any information, it is simple to determine what type of content would fit in a semantic header section.

What is a strikethrough or line-through?

The strikethrough presents the words with a horizontal line through the center, resulting in text similar to this. It denotes that the text has been removed or altered.

There are several ways to use strikethrough text. It may indicate that something has been struck out or is no longer valid in specific circumstances. In other events, it may be employed as a type of emphasis to draw attention to a text. We can use it in official and casual documents for various purposes.

Here are some examples of when to use strikethrough or a line-through:

1. It denotes that the text has been removed or altered.
2. A strikethrough indicates an edited or revised text.
3. We can use a strikethrough to call emphasis to a specific area of text.
4. The strikethrough text will assist the audience in focusing on the most critical elements.

Strikethrough or line-through using HTML and CSS

It is possible to create strikethrough and line-through text using HTML and CSS. There are several ways to accomplish this. Let’s go over them one by one.

Using strike tag in HTML

A strike tag was available in prior versions of HTML. This tag functions similarly to a regular tag, but instead of displaying the original content, it shows the strikethrough text.

<strike>This is strikethrough text</strike>Code language: HTML, XML (xml)

This tag is no longer accessible. Major browsers have already discontinued it. As a result, employing this tag may cause issues because the major browsers will not support it, and we cannot anticipate the tag to perform effectively on all systems.

Using the s tag in HTML

The s HTML elements, like the strike HTML element adds a strikethrough or a line through the text.

<s>This is strikethrough text</s>Code language: HTML, XML (xml)

We should not use the s tag to indicate document modifications. Furthermore, most screen-reading technologies do not detect the existence of the s tag for its default configuration.

Using the del tag in HTML

The del HTML element denotes the removed section of text from a document. We can utilize it for displaying “track changes” or source code diff information.

<del>This is strikethrough text</del>Code language: HTML, XML (xml)

We should note that this element is often, but not always, represented by adding a strikethrough style to the text. Furthermore, most screen reading technologies do not detect the existence of the del tag for its default configuration.

s tag v/s the del tag

Both of them are strikethroughs. They do, however, communicate different meanings about the content. As a result, they are incompatible. We should not indicate document edits with the s tag. A thumb rule could be to use the del HTML tag if the content suggests something that has been removed and use the s HTML tag in all other cases.

Pairing del with ins

The ins HTML element represents a section of text added to a document. You may use it in conjunction with del to create an interface that tracks and records changes to your document.

<div>
    <del>This is strikethrough text</del>
    <ins>This is inserted text</ins>
</div>Code language: HTML, XML (xml)

The content inside the HTML del tag is highlighted in red and is strikethrough, whereas the text inside the ins HTML element gets highlighted in green and is underlined.

Using the text-decoration property in CSS

Text decoration is a shorthand CSS property that sets how decorative lines appear on text. The browser will draw the text decorations over descendant text components. It implies that if a part specifies a text decoration, a child element cannot delete the decoration. It takes the following values:

1. none: Remove all the current decorations, but don’t remove any lines.
2. underline: puts a line across the text at its baseline.
3. line-through: puts a line across the text at its center.
4. overline: puts a line immediately over the top of the text.
5. inherit: inherits the parent’s decoration.

We will use the text-decoration CSS property with the value line-through to produce a strikethrough or line-through. Let’s make a strikethrough or line-through using the text-decoration CSS property.

<p class="strikethrough">This is strikethrough text</p>Code language: HTML, XML (xml)

.strikethrough {
    text-decoration: line-through;
}Code language: CSS (css)

As you can see, the text-decoration CSS property allows us to generate a strikethrough or line-through text. The produced strikethrough or line-through is identical to the one created using the HTML elements we covered previously.

We may also utilize the text-decoration property by supplying the value as one or more space-separated values reflecting the different longhand text-decoration characteristics.

.mixed {
    text-decoration: line-through underline;
}Code language: CSS (css)

Combination of strikethrough and line-through effects

Using the span HTML tag, we may mix the strikethrough or line-through results with other text. We can give the span HTML element inline styles or a CSS stylesheet.

Let’s experiment with the strikethrough or line-through with some additional text. We will use Inline styles since they are more convenient. To begin, we will construct a paragraph and then insert a span containing the text we wish to strikethrough or line through.

<p>This is a <span style="text-decoration: line-through;">strikethrough</span> text and this is an <span style="text-decoration: underline;">underline</span> text.</p>Code language: HTML, XML (xml)

As you can see, we may combine various text effects inside a single paragraph. We may also change the font style to bold, italic, etc., but keep in mind that the line thickness of the strikethrough or line-through may vary if the text is bold in some browsers.

Conclusion

This article looked at a strikethrough or line-through, one of the essential effects. We also examined how simple HTML and CSS can create a strikethrough/line-through effect on text. Further, we discussed various ways to develop a strikethrough or line using plain HTML and CSS. Finally, we learned how to combine text-decoration effects on a single paragraph using the span tag.

You can access all the source codes using the following link:
https://codedamn.com/playground/LS5hMsB5xmYRRbxI_BfkM

Thank you so much for reading ?