CSS 下線を文字数によって下線の長さを変えたい。

Question

前提・実現したいこと

以下の画像のようにテキストの下に下線がありテキストの文字数によって下線の長さを変えたい。

灰色の下線は幅いっぱいに
青の下線はテキストの長さによって変えたい。

条件がありWordPressの記事のため<h2>タグ以外を入れ子などにして、タグは使いたくないです
h2タグの改行にも対応したい。

該当のソースコード

<h2>サブタイトルサブタイトルサブタイトル</h2>

borderと記事要素を使ってうまく下線の長さを変えることは可能でしょうか？

h2 {
    display: inline-block;
    border-bottom: solid 4px #F7F7F7;
    border-bottom: solid 4px #003CB0;
    max-width: 100%;
    position: relative;
  }
  
  h2::after{
    content:"";
    display:inline-block;
    width:100%;
    height:3px;
    background-color:red;
    position:absolute;
    bottom:0;
    left:0;
 }

もしできそうな方がいたら教えていただきたいです。

Answer 1

下記でいかがでしょうか。

  <div>
    <h2>サブタイトルサブタイトルサブタイトル</h2>
  </div>

  div {
    border-bottom: 5px solid #ccc;
  }
  h2{
    display: inline;
    border-bottom: 5px solid #00f ;
  }

２～４行の改行でしたら全部の行に灰色の下線を付けることができると思いますが、全く違うcssになります。
ただし、複数行になる箇所を自身で把握して、２行用・３行用などのcssを個別に指定する必要があると思います。
つまりcssだけでは自動で反映はできないと思います。（未確認）

Answer 2

h2に青色の下線、
h2::afterに横幅いっぱいの半透明グレーの線
を指定するという変則的なつくりですが、こちらだといかがでしょうか?

h2 {
  display: inline-block;
  border-bottom: solid 4px #003cb0;
  max-width: 100%;
  position: relative;
  padding-bottom: 8px;
}

h2::after {
  content: "";
  position: absolute;
  width: calc(100vw - 40px); /* 横幅いっぱいにするための指定。「-40px」の数値などは、左右の余白です。 */
  height: 4px;
  background: rgba(0, 0, 0, 0.1); /* 半透明にする */
  left: 0;
  bottom: -4px;
}

Answer 3

text-decoration: underlineを使用するのはどうでしょうか？

Comments

[ransuS_T]

もし下線を重ねて表示したいなら
対象の要素はブロックにして文字は入力せず
疑似要素のcontentに入力したい文字を持ってきてこっちをインラインブロックにしてください

あとは対象の要素と疑似に同じ高さを指定すれば重なります

(その際幅の指定やposition指定は消しといてください)