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.