先日、こんなツイートをしました。
✅線を引くのにまだborder使ってるの？
— おか | 知多半島のホームページ屋 (@oka_jumboworld) November 22, 2020
2行で簡単に文字に線を引くことができるプロパティcss<br>h1 {<br> text-decoration: overline;<br> text-decoration-color: deeppink;<br>https://t.co/qGR0TTfvFL#駆け出しエンジニアと繋がりたい#デイトラpic.twitter.com/QTZmB3jlL7
これを見つけたとき
「やっぱりcssって面白い」
と思いました。難しいけど、楽しいんですよね。
どこかの外国人がcodepenでシェアしており、知りました。
こちらが参考コードです。
See the Pen
Overstanding overlines by Adam Argyle (@argyleink)
on CodePen.
外国人のシェアしたのでは文字の上にしか線を引いてなかったので、自分で試してみました。
See the Pen
text-decoration by TakahiroOkada (@okalog)
on CodePen.
ふむふむ。なかなか便利そうですね。
文字の下に下線を引く方法
上のcodepenのコードを参考にしてもらえれば分かると思うんですが、実際に僕が書いたコードがこちらです。
※ラインを引くためだけに必要なプロパティです。文字サイズとかは省略しています。
.top{text-decoration:overline;text-decoration-color:#FF1494;}.bottom{text-decoration:underline;text-decoration-color:#C9B500;}text-decorationで上下どちらかの線を決めて、text-decoration-colorで色の指定しています。
他にも何かできないかなって調べてみたらこんなこともできました。(※用途不明)
See the Pen
mdEZgmL by TakahiroOkada (@okalog)
on CodePen.
めんどくさいので、やりませんがドットや二重線とかも引けそうですね。
・参考記事（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」になるでしょう。
とのことでした。
せっかくなので、色々試してみようと思います。