このページで解説するコードの実行結果。

文字列を装飾する線
sample1
sample2
sample3

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。

CSS : デフォルトCSS
div {
    color:              navy;           /*  文字の色 */
    font-size:          2em;            /*  文字の大きさ */
    display:            inline-block;   /*  横並び */
    margin:             10px;            /*  外側の余白 */
}

概要

文字列の装飾線を設定する。

プロパティ設定内容
text-decoration下記の3項目をまとめて指定
text-decoration-line下線underline、取り消し線line-throughなど
text-decoration-style実線solid、点線dottedなど
text-decoration-colorred、緑greenなど

CSS2までは text-decoration のみであったが、CSS3では線の種類( 実線solid、点線dottedなど )や色(赤red、緑greenなど )を指定できるようになった。

CSS2text-decorationtext-decoration-line と同じであり、CSS3ではtext-decorationは3項目をまとめて設定するためのプロパティになった。(bordertext-emphasisと似ている)

目的全体個別
文字列の装飾線text-decorationtext-decoration-line
text-decoration-style
text-decoration-color
境界線borderborder-style
border-width
border-color

text-decoration

text-decoration-linetext-decoration-styletext-decoration-colorをまとめて指定できる。(それぞれの設定値は後述)

CSS : auto
.sample1 { text-decoration: underline overline solid  red;    }
.sample2 { text-decoration: underline          wavy   purple; }
.sample3 { text-decoration: line-through       double green;  }
HTML : 適用するHTML
<div class="sample1"> sample1 </div>
<div class="sample2"> sample2 </div>
<div class="sample3"> sample3 </div>
実行結果
sample1
sample2
sample3

なお、設定の順番を変えても問題ない。

CSS : 設定の順番を変える
.sample1 { text-decoration: underline solid     red;        }
.sample2 { text-decoration: solid     red       underline;  }
.sample3 { text-decoration: red       underline solid  ;    }
実行結果
sample1
sample2
sample3

text-decoration-line

(表) text-decoration-lineの設定値
設定値デフォルト
noneなし
underline下線
overline上線
line-through取り消し線

なお、文字列を点滅させる設定値「blink」は廃止予定であり、ほとんどのブラウザではnoneとして扱われる。

まず、text-decoration-lineの設定が無い場合の結果。(デフォルト値のnoneと同じ結果)

HTML : 適用するHTML
<div class="sample">
    text-decoration
</div>
実行結果
text-decoration

none

CSS : none
.sample  {
    text-decoration-line:   none;
}
線なし
text-decoration

underline

CSS : underline
.sample  {
    text-decoration-line:   underline;
}
下線
text-decoration

overline

CSS : overline
.sample  {
    text-decoration-line:   overline;
}
上線
text-decoration

line-through

CSS : line-through
.sample  {
    text-decoration-line:   line-through;
}
取り消し線
text-decoration

複数設定

CSS : 上下
.sample  {
    text-decoration-line:   underline overline;
}
複数設定
text-decoration
CSS : 上下 + 取り消し線
.sample  {
    text-decoration-line:   underline overline line-through;
}
複数設定
text-decoration

text-decoration-style

(表) text-decoration-styleの設定値
設定値デフォルト
solid実線
double二重線
dotted点線
dashed破線
wavy波線

solid : 実線

CSS : solid
.sample  {
    text-decoration-line:   underline;
    text-decoration-style:  solid;
}
実線
text-decoration

double : 二重線

CSS : double
.sample  {
    text-decoration-line:   underline;
    text-decoration-style:  double;
}
二重線
text-decoration

dotted : 点線

CSS : dotted
.sample  {
    text-decoration-line:   underline;
    text-decoration-style:  dotted;
}
点線
text-decoration

dashed : 破線

CSS : dashed
.sample  {
    text-decoration-line:   underline;
    text-decoration-style:  dashed;
}
破線
text-decoration

wavy : 波線

CSS : wavy
.sample  {
    text-decoration-line:   underline;
    text-decoration-style:  wavy;
}
波線
text-decoration

text-decoration-color

カラーコードで指定する。

デフォルト値は文字列と同じ色になる。

CSS : red
.sample  {
    text-decoration-line:   underline;
    text-decoration-color:  red;
}
赤線
text-decoration
CSS : green
.sample  {
    text-decoration-line:   underline;
    text-decoration-color:  green;
}
緑線
text-decoration

borderプロパティとの併用

ごちゃごちゃになるので避けた方が良い。

CSS : border
.sample  {
    text-decoration:    underline solid green;
    border:             4px       solid red;
}
ごちゃごちゃ
text-decoration

なお、太さを指定したいなら、border-bottomを使うとtext-decoration: underline;のようになる。(ただし、波線wavyはできない)

CSS : border-bottom
.sample  {
    border-bottom: 4px solid green;
}
border-bottomを使った例
text-decoration

Emmet : td

記述Visual Studio Code
tdtext-decoration: none;
tdutext-decoration: underline;
tdotext-decoration: overline;
tdltext-decoration: line-through;