テキストに下線（または上線）を引く、text-decorationに関連する新プロパティがある。現在のブラウザの多くが下線の色や線の形状（実線、破線など）を設定できる。

テキストの下線の色、線の形状を設定するには

テキストの下線（または上線）の形状を破線や点線などに変更したいときは、text-decoration-styleプロパティを使う。

h1 {
    text-decoration: underline;
    text-decoration-style: dashed;
}

また、下線（または上線）の色を変えるには、text-decoration-colorプロパティを使う。

h1 {
    text-decoration: underline;
    text-decoration-color: red;
}

Chrome、Firefoxでは、text-decorationに3つの値──上線／下線、線の形状、線の色──を一度に指定することができる。

h1 {
    text-decoration: underline dashed red;
}

さらに新しい機能

ここまでに紹介した線の形状と色を変更するプロパティはすでに多くのブラウザで実装されている。が、それ以外にも3つ、新しいプロパティがある。

• 線の太さを設定するtext-decoration-thicknessプロパティ
• テキストと下線とのあいだのスペースを調整するtext-underline-offsetプロパティ
• ベースラインより下に出る文字に下線を重ねて引くかどうかを指定できるtext-decoration-skip-inkプロパティ

すべてのブラウザが実装しているわけではないためいますぐ実用化できるプロパティではないが、将来使えるようになるかもしれない。2019/10/24現在の状況を記している。

線の太さを設定する

text-decoration-thicknessプロパティを使うと、テキストの下線（上線も）の太さを設定できる。Firefox70、Safariが実装。たとえば太さを5pxにする場合：

h1 {
    text-decoration: underline;
    text-decoration-color: red;
    text-decoration-thickness: 5px;
}

テキストと下線とのあいだのスペースを調整する

text-underline-offsetプロパティを使えば、テキストと、下線のあいだに空くスペースを設定できる。Firefox70、Safariが実装。15pxに設定した場合：

.offset {
    text-decoration: underline;
    text-decoration-color: #ff0000;
    text-underline-offset: 15px;
}

ベースラインより下に出る文字に下線を重ねて引くかどうかを設定する

ベースラインより下にはみ出す文字がない日本語にはあまり関係ないが……
text-decoration-skip-inkプロパティを使って、ベースラインより下にはみ出す文字（gやp、yなど）の部分に、下線を重ねて引く（none）か、その部分には下線を引かない（auto）かを設定できる。初期値はauto。Firefox70、Chromeが実装。

.non-skip {
    text-decoration: underline;
    text-decoration-color: #ff0000;
    text-decoration-skip-ink: none;
}

参考

• Firefox 70 — a bountiful release for all
• CSS Text Decoration Module Level 3