How to make strikethrough text in CSS

CSS allows you to perform a variety of operations associated with the decorative decoration of the entire page. Particular attention is paid to the text, which in most cases fills most of all sites. Today we will consider one interesting property: underlined, underlined, and crossed out text. All of these effects are set using a single CSS rule.

strikethrough text

Assignment

You can emphasize and cross out text in CSS using the text-decoration command. The effect will depend on the value indicated. CSS was invented to separate the logical and structural part of a web page. But before cascading style sheets appeared, HTML tags were used that had a similar meaning. For example, an element such as <strike> allows you to display strikethrough text. Now this tag is considered undesirable, and its use will automatically make your page code invalid. Although, the <strike> element is still supported by all modern browsers and is used by some developers. But back to CSS. The text-decoration command can have the following meanings:

  • Underline By assigning this value, you will get underlined text.
  • Overline The line will go over a specific section of the page.
  • Line-through. Creates strikethrough or strikethrough text.
  • Blink The selected fragment of the document will periodically disappear and reappear.
  • There are also values ​​of "none" and "inherit". The first cancels all effects, and the second orders to inherit the property from the parent element.

cross out text

Destination

It would seem that strikethrough text and similar effects in CSS only serve to decorate the text. In most cases, this statement is true. But sometimes it’s worth considering the question: why were such elements created? For example, the already obsolete "strike" tag was used to indicate incorrect or old information. Readers, having seen the crossed out text, understand the hidden meaning of such a designation. Underlined words are always immediately distinguished from the general flow. Therefore, this effect must be used to highlight important information. The “blink” value, which makes the text blink, is used quite rarely, since it is generally accepted among programmers as unacceptable. After all, few of your readers like flickering characters that will constantly distract them. Well, the value "overline" is used only to decorate the text.

css strikethrough text

Features

Although all values ​​of the text-decoration property are included in the specification for cascading table versions, some values ​​are not supported by modern browsers. For example, blinking text will not be visible in IE. The Google Chrome browser does not accept some values. Mobile platforms do not fully support this feature.

Conclusion

Effects such as strikethrough text and other similar meanings are used quite often on the Internet. Their use allows you to correctly express the main idea of ​​the author, helping to focus readers on the right part of the text. But don’t be too zealous and use the “text-decoration” property whenever possible. Indeed, excessive decoration of the text can harm you and your readers.

Source: https://habr.com/ru/post/K4200/


All Articles