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>
Fill in the strikethrough text with s and strike

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 the del tag

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.

AttributeValueExample
solidsingleword
wavywavyword
doubledoubleword
dasheddashedword
dotteddottedword

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;
}
Example of text strikethrough with an orange line

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;
}
Example of setting the desired color for text and line

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%;
}
Strikeout text in the strikethrough text with the before pseudo element

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;
}
Strike out the strikethrough text from behind with a pseudo before element

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.

Leave a Comment

Your email address will not be published. Required fields are marked *