CSS HTML

How to cross out a word applying CSS

October 24, 2021

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.

cross out a word applying CSS cover

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

Conclusion

In this article we learned how to cross out a word applying CSS, which is a good practice

We used the text-decoration property with the line-through value

And that’s it for today; see you on the next post! 

Want to learn more about CSS? Click here!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x