HTML strikethrough text

In an HTML environment, strikethrough text can be rendered using CSS style sheets and tags.

To simply display the strikethrough text, you must use a tag.

For a more fine-tuned visualization of the content is better to use the CSS properties that are executed when assigned to an element.

Crossed out text using tags

The first tag used for strikethrough text is strike. Its analog is the s tag, which is abbreviated as: u (underlined), i (italic), b (highlighted). The use of s and strike as strikethrough text tags has been frowned upon since the HTML 4 specifications, and in HTML 5 they are not allowed at all.

<strike>Strikethrough text</strike>
<s>Strikethrough text</s>

They have been replaced by the del tag, which is semantically more correct, highlighting the text as strikethrough. There is no difference in display between the tags.

<del>Strikethrough text</del>

Strikethrough text using CSS

It is possible to style the strikethrough text using CSS styles. To do that, the text-decoration property is used. When using the necessary attributes is possible not only to display the strikethrough text, but underlined at the top, bottom or flashing. If more than one line is to be displayed, values must be entered separated by a space.

The values are

• line-through – line underlines the word
• underline – the line underlines the word
• overline – overlaps the word
• blink – sets the text to blink (1 time per second)
• inherit – the value is taken from the parent attribute
• none – cancels all the effects, including underline links

If necessary, you can change the line look. The text-decoration-style property with the attributes below is used.

Changing the line color

It is possible to make a line of a certain color by applying the text-decoration-color property.

<del class="txt">Strikethrough text</del>

.txt {
  text-decoration: line-through;
  text-decoration-color: orange;
}

By setting line color to del tag, it’s possible to set text color for span tag.

<del class="txt">
  <span>Strikethrough text<span>
</del>

.txt {
  text-decoration: line-through;
  text-decoration-color: orange;
}

.txt span {
  color: green;
}

Using a :before pseudo element, you can set the desired thickness of the line, its position and color. Do this without hyphenation.

<del class="txt">Strikethrough text</del>

.txt {
	position: relative;
	color: #1E5945;
	text-decoration: none;
}
.txt:before {
	content: "";
	border-bottom: 3px solid blue;
	position: absolute;
	top: 0;
	left: 0;    
	width: 100%;
	height: 55%;
}

This element allows a line to be positioned behind the text.

<del class="txt">Strikethrough text</del>

.txt {
	position: relative;
	color: 000;
	text-decoration: none;
}
.txt:before {
	content: "";
	border-bottom: 3px solid aqua;
	position: absolute;
	top: 0;
	left: 0;    
	width: 100%;
	height: 45%;
  z-index: -1;
}

Conclusion

Using CSS styles provides the most complete rendering for displaying content in HTML. By creating a CSS style library, it is possible to define specific styles for attachments, classes and id’s. When creating a document, you just need to correctly specify the style for the selected element. This speeds up the work and minimizes repetition in the code, which affects both the validation, its length and visual perception.