How to cross out a word applying CSS

In this article, we will learn how to cross out a word applying CSS, which is considered a good practice as it is done natively, using a language native function.

Hey you Programmer, what’s up?

Let’s learn a technique, which is considered quite simple, but it’s definitely worth the knowledge.

Sometimes, because of layout/design, we need to cross out a word from our web page or even text, and we can do that with CSS

Let’s use this HTML:

<!DOCTYPE html>
 <html>
  <head>
   <title>Como riscar uma palavra com CSS</title>
  </head>
  <body>
   <p>Este text deve ser riscado.</p>
  </body>
</html>

It represents this in the browser:

Now let’s add the CSS needed to cross out the text, which is our goal on this article

Technique for crossing out text on CSS:

To accomplish this result, let’s use the text-decoration property with the line-through value

See how it looks in the code:

p {
 text-decoration: line-through;
}

It represents this in the browser:

That way we reach our goal!

Applying the text-decoration property we can do much more than just cross out the text

For example: make bold or italics!

Of course, it’s much more advantageous to use the native options of a language, whether it’s HTML, CSS, JavaScript or whatever language you’re currently working on.

Because it will make your code faster to be displayed and also following good practices