border-bottom のグラデーションを実装方法

前提・実現したいこと

こんな感じのグラデーションからのborder-bottomをCSSで実装させたいと考えています。

発生している問題・エラーメッセージ

しかし私が書いたCSSでは

このように下線と文字に隙間ができてしまいます。

どなたか正しいCSSを教えていただけないでしょうか？

該当のソースコード:HTML

<h2 class="about__title">
  <span>Online留学</span> とは？
</h2><!-- /.about__title -->

該当のソースコード:CSS

.about__title span {
  font-size: 30px;
  font-weight: bold;
  line-height: 1;

  /* 下線 */
  border-bottom: 6px solid;
  border-image: linear-gradient(to right,
  rgb(244, 159, 59, 100%), 
  rgb(255, 121, 121, 100%), 
  rgb(235, 136, 205, 100%));
  border-image-slice: 1;
}

補足情報（FW/ツールのバージョンなど）

青い線とフォントが違うことは気にしないでください。

行動規範の内容に同意します

回答1件

ベストアンサー

border の設定ではどう頑張ってもテキストと下線を重ねるのは無理でしょう。

background-imageを使えば、background-position-yでお好みの位置に表示させることができます。

css
1.about__title span {
2  font-size: 30px;
3  font-weight: bold;
4  line-height: 1;
5  background-image: linear-gradient(to right,
6  rgb(244, 159, 59, 100%), 
7  rgb(255, 121, 121, 100%), 
8  rgb(235, 136, 205, 100%));
9  background-repeat: no-repeat;
10  background-size: 100% 6px;
11  background-position-y: 76%;
12}