CSS の text-decoration でテキストに打ち消し線をつけよう

phi phi on css

いつも忘れるので備忘録がてらまとめておきます.

Runstant Demo

とりあえずデモをどうぞ.

テキストにラインが入っているのがわかるかと思います.

text-decoration とは?

text-decoration は, テキストに下線や打ち消し線などを付ける際に使用します.

打ち消し線の場合はこんな感じ.

p {  
  text-decoration: line-through;
}

指定できるプロパティ一覧

value description
none なにも表示されません. これがデフォルト値です.
underline テキストに下線が付きます.
overline テキストに上線が付きます.
line-through テキストに打ち消し線が付きます.

Code

html

クラスを指定しているだけです.

<p class='example1'>こんにちは, 世界!(none)</p>  
<p class='example2'>こんにちは, 世界!(overline)</p>  
<p class='example3'>こんにちは, 世界!(underline)</p>  
<p class='example4'>こんにちは, 世界!(line-through)</p>  
<p class='example5'>こんにちは, 世界!(複数)</p>  

css

それぞれの値を指定しています. 複数指定したい場合は example5 のように space を挟んで指定します. 上にあるデモの実行画面で見た目の違いが分かるかと思います.

p.example2 {  
  text-decoration: overline;
}
p.example3 {  
  text-decoration: underline;
}
p.example4 {  
  text-decoration: line-through;
}
p.example5 {  
  text-decoration: overline underline line-through;
}