CSSでテキストの下線を装飾する

## はじめに

CSSでテキストの下線を装飾する際にこれまで `border-bottom` を利用することが多かったが `text-decoration` が色々設定できることを知ったのでまとめてみました。

### 下線を引く

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="wvmZgPW" data-user="kiitan" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiitan/pen/wvmZgPW">
  Untitled</a> by kiitan128 (<a href="https://codepen.io/kiitan">@kiitan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 色を変更する
`text-decoration-color` で色を変えられる。

https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration-color

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="bGvJgrw" data-user="kiitan" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiitan/pen/bGvJgrw">
  Untitled</a> by kiitan128 (<a href="https://codepen.io/kiitan">@kiitan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 下線の太さを調整する

`text-decoration-thickness` で下線の太さを調整できる。

https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration-thickness

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="eYMogeM" data-user="kiitan" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiitan/pen/eYMogeM">
  Untitled</a> by kiitan128 (<a href="https://codepen.io/kiitan">@kiitan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 下線テキストとの距離を調節する

下線のみですが `text-underline-offset` でテキストとの距離を設定することができます。

https://developer.mozilla.org/ja/docs/Web/CSS/text-underline-offset


<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="jOzRyxL" data-user="kiitan" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiitan/pen/jOzRyxL">
  Untitled</a> by kiitan128 (<a href="https://codepen.io/kiitan">@kiitan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### 線が途切れないようにする
`text-decoration-skip-ink` で `gpy` などの下線を突き抜けてしまう文字が入っている時に下線を途切れないようにする。

https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration-skip-ink

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="NWYmdEj" data-user="kiitan" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiitan/pen/NWYmdEj">
  Untitled</a> by kiitan128 (<a href="https://codepen.io/kiitan">@kiitan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### 下線の位置を変更する

`text-underline-position` で縦書きなどの時に下線を引く位置を変更する必要が出た際に使える。
下線なので `text-underline-offset` も利用できる。

https://developer.mozilla.org/ja/docs/Web/CSS/text-underline-position

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="VwXNPRw" data-user="kiitan" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kiitan/pen/VwXNPRw">
  Untitled</a> by kiitan128 (<a href="https://codepen.io/kiitan">@kiitan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### 最後に

この記事をみて話してみたいと思ってもらえたら、こちらのDevトークに「話したい」をお願いします

https://jobs.qiita.com/employers/qiita-inc/dev_talks/445