CSSで文字にマーカー風のアンダーラインを引く3つの方法

ブログ記事などで、注目して欲しい箇所を表すために、文字に蛍光ペンで書いたようなマーカー風のアンダーラインを引く表現方法があります。

今回はマーカー風のアンダーラインを引くための3つの方法と、それぞれのメリット・デメリットを紹介します。

方法その1
backgroundプロパティを使用した方法

背景色や背景画像が設定できるbackgroundプロパティと、グラデーションが設定できるlinear-gradient関数値を使用した方法です。

…
<style>
.marker_backgorund {
  background: linear-gradient(transparent 50%, orange 50%);
}
</style>
…
<p class="marker_backgorund">backgroundプロパティで、p要素に、マーカー風のアンダーラインを引く。</p>
<p><span class="marker_backgorund">backgroundプロパティで、span要素に、マーカー風のアンダーラインを引く。</span></p>
…

上から中央 (50%) までが透明 (transparent)、中央 (50%) から下までがオレンジ色の背景色を設定して、マーカー風のアンダーラインを実現します。

メリット

グラデーションがかかった色や斜線なども表現できます。他の2種類に比べ、最もカスタマイズの幅が広い設定方法と言えます。

デメリット

span要素などのインラインレベル要素に適用した場合は問題ありませんが、p要素などのブロックレベル要素に適用した場合、ブロック内の文字列が複数行になると、意図しない表示になってしまいます。また、行の高さ (line-heightプロパティの値) も考慮しなくてはなりません。

近年、目にすることが増えてきた縦書きと、X軸とY軸を基準にするbackgroundプロパティの相性はよくありません。

方法その2
box-shadowプロパティを使用した方法

要素に影が設定できるbox-shadowプロパティと、影を内側に設定するinsetキーワードを使用した方法です。

…
<style>
.marker_box-shadow {
  box-shadow: inset 0 -0.5em orange;
}
</style>
…
<p class="marker_box-shadow">box-shadowプロパティで、p要素に、マーカー風のアンダーラインを引く。</p>
<p><span class="marker_box-shadow">box-shadowプロパティで、span要素に、マーカー風のアンダーラインを引く。

要素内の下側に、文字の半分 (-0.5em) のオレンジ色の影を設定して、マーカー風のアンダーラインを実現します。

メリット

影は複数つけられるので、backgroundプロパティほどではありませんが、アンダーラインをカスタマイズできます。

デメリット

backgroundプロパティを使用した方法と同様、span要素などのインラインレベル要素に適用した場合は問題ありませんが、p要素などのブロックレベル要素に適用した場合、ブロック内の文字列が複数行になると、意図しない表示になってしまいます。行の高さ (line-heightプロパティの値) を考慮する必要があることも同様です。

box-shadowプロパティもX軸とY軸を基準にしているため、縦書きとの相性はよくありません。

方法その3
text-decorationプロパティを使用した方法

文字を装飾できるtext-decorationプロパティを使用した方法です。

text-decorationプロパティ自体は古くからありますが、CSS Text Decoration Module Level 3 と CSS Text Decoration Module Level 4 の策定により、text-decoration-lineプロパティ、text-decoration-styleプロパティ、text-decoration-colorプロパティ、text-decoration-thicknessプロパティの4つのプロパティのショートハンドプロパティ (一括設定プロパティ) になり、多様な装飾ができるようになりました。

…
<style>
.marker_text-decoration {
  text-decoration: underline;
  text-decoration-color: orange;
  text-decoration-thickness: 0.5em;
  text-decoration-skip-ink: none;
  text-underline-offset: -0.25em;
}
</style>
…
<p class="marker_text-decoration">text-decorationプロパティで、p要素に、マーカー風のアンダーラインを引く。</p>
<p><span class="marker_text-decoration">text-decorationプロパティで、span要素に、マーカー風のアンダーラインを引く。</span></p>
…

text-decoration-colorプロパティで色、text-decoration-thicknessプロパティで太さを設定します。

本来であれば、text-decoration: underline 0.5em orange; のように一括設定できるのですが、2023年5月現在、Apple のブラウザ Safari がショートハンドに完全対応していないため、個別に設定しています。

text-decoration-skip-inkプロパティは、アルファベットの「g」「j」「p」「q」「y」といったベースラインを下に突き抜ける文字にアンダーラインが設定された場合、どのように表示させるかを設定するプロパティで、デフォルトでは、文字とアンダーラインが重ならないようアンダーラインを中断します。マーカー風に表示させる場合、中断されないよう none を設定します。

text-underline-offsetプロパティは、アンダーラインの位置をずらすためのプロパティです。通常、アンダーラインはベースラインより下に表示されますが、マーカー風に表示させる場合、少し文字にかかるようにずらします。

メリット

インラインレベル要素とブロックレベル要素、文字列が単一行か複数行かを問わず使用できます。行の高さ (line-heightプロパティの値) を考慮する必要もありません。

また、縦書きにも問題なく使用できます。

デメリット

前述した2つの方法ほど、カスタマイズの幅は広くありません。

CodePenによる表示

〆

いずれも、メリット・デメリットがあるので、制作方針や運用方針に応じて、より良いものを選ぶ必要があります。