【css】テキストに合わせて途中からborderの色を変えたい

Question

http://techmemo.biz/css/border-change-color/
上記サイトのように実装しようと考えているのですが、
テキストの長さに合わせて赤色のborderの色が変わるようにできますでしょうか？
ご教示のほどよろしくお願い致します。

Answer 1

テキストをインライン要素で囲って、そこに赤いborderを設定すればよいのではないでしょうか。

▽サンプル
https://jsfiddle.net/pepe6_/oeso9cx7/

<h2>
  <span>てすとてすとテストテスト</span>
</h2>

h2 {
  border-bottom: solid 2px #000;
}
h2 span {
  border-bottom: 2px solid #ff0000;
}

Answer 2

テキストの幅から少しずらしたい場合は、以下でどうでしょうか。

	h2 {
		border-bottom: solid 2px #000;
		padding: 0;
	}
	h2 span {
		display: inline-block;
		position: relative;
	}
	h2 span:after {
		background: #ff0000;
		bottom: -2px;
		content: '';
		display: block;
		height: 2px;
		left: 0;
		position: absolute;

		/* 相対的に％の場合 */
		/*width: 80%;*/
		/* 固定値マイナスしたい場合 */
		width: calc(100% - 50px);
	}

<h2><span>てすとてすとテストテスト</span></h2>
<h2><span>てすとてすとテストテストテストテストテストテスト</span></h2>