borderの高さを途中から変えたい

Question

前提・実現したいこと

お世話になっています。

どうにも上手くいかなく、度々申し訳ないのですが、お力を借りられたらと思います。

要件としては見出しをデザインの関係でborderの高さを変えたいです。
下記が理想の上、一応2通り考えたのですが、それぞれが一歩足りない部分があり困ってます。

理想形

該当のソースコード

パターン1

h2{
      position: relative;
      padding: 0.25em 0;
}

h2:after {
  	content: "";
  	display: block;
  	height: 4px;
  	background: -webkit-linear-gradient(to right, rgb(0, 129, 210), rgb(134, 220, 207));
  	background: linear-gradient(to right, rgb(0, 129, 210), rgb(134, 220, 207));
	width:50%;
	border-bottom:solid 1px #eee;
}

この形の場合、下線が伸びないため、困ってます

パターン2

h2{
      border-bottom: solid 1px #fff;
  	position: relative;
	padding:30px 0;
}

h2:after {
  	position: absolute;
  	content: " ";
  	display: block;
 	border-bottom: solid 3px;
	border-image: linear-gradient(to right, rgb(0, 129, 210), rgb(134, 220, 207));
	border-image-slice: 1;
  	bottom: -3px;
  	width: 50%;
}

この形の場合、色が変わるグレーの線がbottomにいってくれない。

試したこと

ネットでの検索

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

イラレのCCにはCSSに書き出す機能があるからそれで解決するかもなのですが、CCの環境がないため試せません。

上記を使えばもしかすると一瞬で終わる問題かもしれないので、少し申し訳なくも思うのですが、ご教授頂けたら幸いです。
宜しくお願いします。

Answer 1

こういうことでしょうか。

h2{
      border-bottom: solid 1px #eee/*#fff*/;
      position: relative;
    padding:30px 0;
}

h2:after {
      position: absolute;
      content: " ";
      display: block;
     border-bottom: solid 3px;
    border-image: linear-gradient(to right, rgb(0, 129, 210), rgb(134, 220, 207));
    border-image-slice: 1;
      /*bottom: -3px;*/
      width: 50%;
      bottom: 0;
}
```**動くサンプル：**[https://jsfiddle.net/okpjgs7r/](https://jsfiddle.net/okpjgs7r/)

Comments

[mutsuki22]

＞kei344さん

回答ありがとうございます。
冷静に考えればそうですね。
回答を見た瞬間に「何を悩んでたのだろう」と少し思ってしまいました。
なんか本当に申し訳なく思います、すみません。
一度落ち着いて考える事は大事な事も改めて実感しました。
本当に有難うございました。

Answer 2

こんなんでどうでしょう。

h2{
  position: relative;
  padding: 0.25em 0;
}

h2:after {
  content: "";
  display: block;
  height: 4px;
  background:
    linear-gradient(to right, rgb(0, 129, 210), rgb(134, 220, 207) 50%,
    rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0));
  width:100%;
  border-bottom:solid 1px #eee;
}

https://codepen.io/hatena19/pen/rNNvYvE

Comments

[mutsuki22]

＞hatena19さん
ご回答ありがとうございます。
冷静に考えれば思い付けそうですが、見たときはなるほどって思いました。
まだまだ未熟者ですね。
大変参考になりました、ありがとうございます。

p.s　どちらも個人的には問題ないので、どちらもお選びしたいくらいなのですが、それが出来ないので、単純に回答のタイミングでベストアンサーを選びました。
他意はないので、ご理解頂けると幸いです。