はじめに
はじめまして．qiita初投稿になります．
現在，自身のWebサイトをリニューアルしようとしているのですが，そのなかで考えた「文字の前後のみに下線を引いたタイトル」の実現に少し手間取り，またそれに類似したサンプルコードも見当たらなかったため，備忘録的にまとめておきます．
作りたいもの
こんな感じで，文字の前後に下線を引きたい．
最初に試したこと
疑似要素に下線を引いた．
See the Pen index_main_heading_1 by Protaetia (@tar0wn3) on CodePen.
こうすると，h2要素のwidthは親要素の左側10px+10%から右端まで広がり，after疑似要素は右端からh2要素の左端まで伸びるため，左側の下線はうまく引けているが右側は文字の下まで引かれてしまう．
かといってh2の文字部分の幅は取得できない為，h2の文字の右側までだけafter疑似要素を伸ばす，といったことはできそうにない．
そこで，疑似要素を使うのは諦め，タイトル部分を3つのdivに区切ってみた．
出来上がったもの
See the Pen index_main_heading_2 by Protaetia (@tar0wn3) on CodePen.
無理やりで，かつあまりきれいなコーディングではないかもしれないが，作りたかったものは実現できた．