TOC

The community is working on translating this tutorial into Vietnamese, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".

Text:

Text Decoration

The text-decoration property is actually quite self-explanatory: It allows you to decorate your text in various ways. It is most commonly used to underline your text:

<div style="text-decoration: underline;">Hello, world!</div>

However, it actually has several other possibilities. For instance, you can use it to create a strikethrough effect on your text:

<div style="text-decoration: line-through;">Hello, world!</div>

Now, the cool thing about the text-decoration property is that it allows you to apply several values at once:

<div style="text-decoration: overline underline;">Hello, world!</div>

Try it out

As the final example, allow me to show you all the possible values in the same example, with a bonus line using all of them simultaneously:

<style type="text/css">
div {
	margin: 30px 0;
}
</style>

<div style="text-decoration: overline;">Hello, world!</div>

<div style="text-decoration: line-through;">Hello, world!</div>

<div style="text-decoration: underline;">Hello, world!</div>

<div style="text-decoration: underline overline line-through;">Hello, world!</div>

Summary

The text-decoration property makes it easy to add lines around or through your text, but bear in mind that it's not a border - the line(s) drawn by the text-decoration property will always be the same color as the text itself. If you need a line in a different color below or above your text, you should use the border properties.


This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!