ラクして文字に線を引く方法　→　結論： text-decoration: underline;です。

先日、こんなツイートをしました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">✅線を引くのにまだborder使ってるの？<br><br>2行で簡単に文字に線を引くことができるプロパティ<br><br>```css<br>h1 {<br> text-decoration: overline;<br> text-decoration-color: deeppink;<br>```<a href="https://t.co/qGR0TTfvFL">https://t.co/qGR0TTfvFL</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/%E3%83%87%E3%82%A4%E3%83%88%E3%83%A9?src=hash&amp;ref_src=twsrc%5Etfw">#デイトラ</a> <a href="https://t.co/QTZmB3jlL7">pic.twitter.com/QTZmB3jlL7</a></p>&mdash; おか | 知多半島のホームページ屋 (@oka_jumboworld) <a href="https://twitter.com/oka_jumboworld/status/1330345261705654274?ref_src=twsrc%5Etfw">November 22, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

これを見つけたとき
「やっぱりcssって面白い」
と思いました。難しいけど、楽しいんですよね。

どこかの外国人が`codepen`でシェアしており、知りました。
こちらが参考コードです。
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="argyleink" data-slug-hash="MWKdWdm" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Overstanding overlines">
  <span>See the Pen <a href="https://codepen.io/argyleink/pen/MWKdWdm">
  Overstanding overlines</a> by Adam Argyle (<a href="https://codepen.io/argyleink">@argyleink</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

外国人のシェアしたのでは文字の上にしか線を引いてなかったので、自分で試してみました。
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="okalog" data-slug-hash="MWeMRbW" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="text-decoration">
  <span>See the Pen <a href="https://codepen.io/okalog/pen/MWeMRbW">
  text-decoration</a> by TakahiroOkada (<a href="https://codepen.io/okalog">@okalog</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

ふむふむ。なかなか便利そうですね。

## 文字の下に下線を引く方法
上の`codepen`のコードを参考にしてもらえれば分かると思うんですが、実際に僕が書いたコードがこちらです。
※ラインを引くためだけに必要なプロパティです。文字サイズとかは省略しています。

```css
.top{
  text-decoration: overline;
  text-decoration-color: #FF1494;
}
.bottom{
  text-decoration: underline;
  text-decoration-color: #C9B500;
}
```

`text-decoration`で上下どちらかの線を決めて、`text-decoration-color`で色の指定しています。
他にも何かできないかなって調べてみたらこんなこともできました。(※用途不明)
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="okalog" data-slug-hash="mdEZgmL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="mdEZgmL">
  <span>See the Pen <a href="https://codepen.io/okalog/pen/mdEZgmL">
  mdEZgmL</a> by TakahiroOkada (<a href="https://codepen.io/okalog">@okalog</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

めんどくさいので、やりませんがドットや二重線とかも引けそうですね。
・参考記事（https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration-style）

## border-bottomとの違い
ツイートしたときに、こんな質問を頂きました。
これ実は僕も気になって調べたんですよね。

そしたら、非常によくまとまった記事があって勉強させて頂きました。
・参考記事（https://www.seleqt.net/programming/the-best-way-draw-underline/）

まとめると
>
さてアンダーラインを引くにはどの方法がベストでしょうか？その答えは状況によって使い分けることがベストとなります。
文字のサイズが小さい場合は、「text-decoration」を利用して、「text-decoration-skip」を適用するのがよいでしょう。見映えは多くのブラウザーで面白味のないものかもしれませんが、見た人が気にならないものでしょう。
本文の場合、「background-image」を利用するのがよいでしょう。アンダーラインが細かったり、テキストとは異なる色を指定する場合は「text-shadow」プロパティを外します。
テキストが1行だけの場合は、「border-bottom」を利用し、必要に応じて他のプロパティで調整するのがいいです。
将来的に各ブラウザーのサポートがよりよくなれば、アンダーラインを引くベストな方法は「text-decoration」になるでしょう。
>

とのことでした。

せっかくなので、色々試してみようと思います。