CSSでテキストに二重線の下線を引く方法を考えてみた。

CSSでテキストの下線を二重線にする方法を思いついたので、まとめたいと思います。
（どこかで既出だったらすみません。）

やりたかったこと

今回の条件としては「display:inlineの要素に対して二重線の下線を引く」こと。以前、テキストにマーカーぽい装飾をするのにCSSのグラデーションを使ったのを思い出し、「グラデーションならinlineでもできるのでは」と思い、その方向で考えてみることにしました。

CSSのグラデーションは、普通に設定すると、2つの色を段階的に変化させて描画しますが（①）、2つの色の設定を下のように記述すると、境界線のようにすることができます（②）。

今回はそれを応用をして線を引くことにしました。

やったこと

実際に書いたCSSは以下のとおり。
htmlはpタグでテキストを囲って、その中の二重線を引きたい箇所をspanタグで囲っています。

demo

p{
  width: 300px;
}
span{
  padding-bottom: 2px;
  background: linear-gradient(to bottom, #fff 0%,#fff 75%,#000 75%,#000 80%,#fff 80%,#fff 95%,#000 95%,#000 100%);
}

まとめ

Facebookを見ていると、知り合いの方が「inlineの要素に二重線の下線を引きたい」というようなことを書かれていたのを見たのが考えるきっかけとなりました。二重線を引こうと思うと、border-bottomや擬似要素で対応する方法もあるのでしょうが、お話を聞いているとdisplay:blockにしづらい状況のようでしたので、inlineのまま使える方法を考えてみることにしました。

CSSのグラデーションは工夫次第でいろいろな使い方ができそうで、調べててもいろいろ出てきて、おもしろいと感じました。
また何か思いついたら共有したいと思います。