CSSで、点線や波線の下線を引く方法

​2026年11月9日​CSS​HTML,Playwright

点線や波線の下線は、text-decoration: underline dotted や text-decoration: underline wavy のように、下線（underline）と線の種類を並べて書くだけで引けます。線の種類は、点線・破線・波線・二重線・実線の5つから選べます。色や太さ、文字との間隔も CSS で変えられるので、その書き方と、英字の下で波線が途切れるときの直し方もあわせて書きます。

線の種類は5つ

下線を引きたい部分を <span> などで囲み、クラスを付けます。

<p>忙しいときは<span class="wavy">猫の手を借りる</span>のも一案です。</p>

CSS では、text-decoration に underline と線の種類を並べます。

/* 下線の種類を1つずつ指定する */
.dotted { text-decoration: underline dotted; }
.dashed { text-decoration: underline dashed; }
.wavy   { text-decoration: underline wavy; }
.double { text-decoration: underline double; }
.solid  { text-decoration: underline solid; }

線の種類は、text-decoration-style というプロパティの値です。上の CSS のように一括指定の text-decoration の中に書くと、getComputedStyle() で text-decoration-style が dotted や wavy になっていました。

「猫の手を借りる」（幅140px）の下に描かれた線を調べると、次のようになっていました。

線の色は、文字の色と別に決められる

線の色を書かないと、線は文字と同じ色になります（後で紹介する <abbr> 要素で調べると、線の色も文字の色も rgb(31, 42, 48) でした）。文字はそのままで線だけ色を変えたいときは、一括指定の最後に色を足します。

/* 波線を、文字とは別の色で引く */
.wavy-pink {
  text-decoration: underline wavy #d85878;
}

getComputedStyle() で見ると、線の色（text-decoration-color）は rgb(216, 88, 120) になっていました。

Safari 26.1 以前に向けては、1つずつ書く

MDN の互換性データ（@mdn/browser-compat-data 8.1.8）によると、一括指定の text-decoration に線の種類や色まで書く書き方に Safari が対応したのは、26.2 からです。それより前の Safari は、-webkit-text-decoration と接頭辞を付けた書き方にしか対応していません。一方で、text-decoration-line、text-decoration-style、text-decoration-color を1つずつ書く書き方には、Safari 12.1 から対応しています。

古い Safari でも点線や波線を出したいときは、次のように1つずつ書きます。

/* Safari 26.1 以前でも線の種類と色が効くように、1つずつ書く */
.wavy-longhand {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #d85878;
}

Chromium では、1つずつ書いても一括指定と同じ計算値になり、線が描かれた画素の位置と数も一致しました。

太さを変えると、点の大きさや波の高さも変わる

線の太さは text-decoration-thickness で変えられます。

/* 点線と波線を太くする */
.dotted-thick { text-decoration: underline dotted #d85878; text-decoration-thickness: 3px; }
.wavy-thick   { text-decoration: underline wavy #d85878;   text-decoration-thickness: 3px; }

太さを指定しないとき、点線は幅2pxの点でした。3pxにすると、点は3px四方になり、同じ幅140pxに並ぶ点は35個から24個に減りました。点と点の間も、およそ2pxから3pxに広がっています。波線は、線が描かれる縦の範囲が7pxから9pxに広がりました。

太さを指定しないときの値は auto で、太さはブラウザが決めます。この検証の20pxの文字では、実線の高さは2pxでした。

英字の下で波線が途切れるときは、少し下げる

英字に波線を引くと、g や p のように下にはみ出す文字のところで、線が途切れました。「Typography gjpq」（幅158px）の下の波線は、7つに分かれていました。text-decoration-skip-ink の説明によると、初期値の auto では、下線が文字に触れたり近づいたりしないように、ブラウザが線を途切れさせることがあります。同じ英字に点線を引くと、158pxの幅に点は24個でした（日本語の140pxの幅では35個）。

波線は上下に幅があるぶん、途切れた部分が目立ちます。text-underline-offset で線を少し下げると、途切れずに引けました。

/* 波線を文字から少し離す */
.wavy-offset {
  text-decoration: underline wavy #d85878;
  text-underline-offset: 0.25em;
}

0.25em は、20pxの文字では5pxでした。下げると、波線が描かれる位置は、<span> の上端から24〜30pxだったのが28〜34pxに移り、端から端まで1本につながりました。

下線以外にも使える

線の種類は、下線だけでなく、取り消し線（line-through）や上線（overline）にも使えます。text-decoration: line-through wavy #d85878 と書くと、文字の真ん中あたり（<span> の上端から12〜17px、<span> の高さは29px）に波線が引かれました。

点線の下線は、ブラウザが最初から使っている場所もあります。title 属性を付けた <abbr> 要素は、CSS を何も書かなくても text-decoration-line が underline、text-decoration-style が dotted になっていました。<abbr> の説明にも、一部のブラウザはこの要素の内容に点線の下線を引くと書かれていて、このスタイルは text-decoration で変えられるとも説明されています。

対応しているブラウザ

MDN の互換性データ（@mdn/browser-compat-data 8.1.8）で、この記事で使っている機能を調べました。