投稿日:2023/06/22 最終更新日:2023/06/22
疑似クラスを使わずにtext-decoration: underlineを3行で作る方法
WEBサイト制作において、テキストの下線は必須と言っても良いデザインになっています。
この下線の作成も様々なパターンがあって、疑似クラス(::beforeや::after)を使って作成する方法がよく見られます。
ただ、疑似クラスで作るCSSはコード量が多くなり可読性が良くありません。
こんにちは！ → こんにちは！
上記の「こんにちは！」は疑似クラスは使わずに3行のCSSしか書いていません。
めちゃくちゃカンタンに下線は調整出来るので書き方の紹介をしていきます。
カンタンな下線の作り方
下記のCSS3行でバッチリ調整も出来ます。
text-decoration: underline;
text-decoration-color: red;
text-underline-offset: 6px;少しこのコードの内容について紹介していきます。
text-decoration: underline;
これは下線を作るだけです。
よく使うので知っているはずです。
text-decoration-color
text-decoration-colorは下線の色を変更することが出来ます。
サンプルコードでは「red」としていますが、もちろんカラーコード(例：#ffffff)も使えます。
text-underline-offset
text-underline-offsetはテキストに対して下線の上下位置を指定(px/%/em/rem/vwなど)します。
正の数値(1px以上)を入力することで下に移動させることが出来ます。
私の感覚では6pxくらいがちょうど見やすいかなと思います。
補足情報
他にも下線を作る際には2つ覚えておいてほしいプロパティがあります。
text-decoration-thickness
text-decoration-thicknessは下線の太さを調整するためのプロパティで数値で指定が出来ます。
text-decoration-thickness: 2px;上記の例のように、少し太めにしたい場合は2pxほどにするとボールドな感じが出ます。
あまりやり過ぎるともっさりした感じが出てしまうので、注意しましょう。
text-underline-position
text-underline-positionはtext-underline-offsetと同様に下線の表示場所を指定します。
違いは数値での入力ができず、auto・under・right・leftの指定のみとなります。
text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;使い分けとしては数値で細かく調整したい場合はtext-underline-offset、デフォルトでざっくりと合わせたい場合はtext-underline-positionかなと思います。
大体は細かく調整したいことの方が多いと思うので、text-underline-offsetで統一するで良いでしょう。
ちなみに私はtext-underline-positionをあまり使いません。
まとめ
CSSも最近の更新で使い勝手が良くなりつつありますね。
ブラウザ対応が追いついていない部分もありますが、おそらく今年中には注目されているプロパティが全主要ブラウザで対応されるかと思いますので、非常に楽しみです。
今回の下線の作り方はどのブラウザでも使用可能ですので、ぜひ使ってみて下さい。
参考資料
https://developer.mozilla.org/ja/docs/Web/CSS/text-underline-offset
https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position
https://www.tohoho-web.com/css/prop/text-underline-position.htm
