Text Decoration

text-decoration 這個屬性其實滿一目了然的：它允許你用多種方式裝飾文字。它最常被用於文字的底線。

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

然而，它其實還有其他許多的可能性。例如，你可以在文字上建立刪除線的效果：

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

現在，最酷的事情是，text-decoration 屬性允許你一次使用許多值。

<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>

結論

text-decoration 屬性讓你更容易為你的文字加上線，但要記得的是它不是邊框─用此屬性建立在文字周圍的線，其顏色將會跟文字一樣。如果你需要一條跟文字不同顏色的線，那你應該要用 border 屬性。