CSSで実装する「見出しデザイン」をまとめてくださっているサイト、たくさんありますよね。
ステキな見出しデザインと、実装するためのコード（HTML＋CSS）が掲載されていて、コピペするだけで使える…というありがたさ。
でも、コードを見てて、
なんのために書くの？
って、なることがあります。
（完全に自分の実力不足です 笑）
そうなった時に、コード解説までされているサイトがあまりないように感じたので、備忘録もかねて自分が詰まったポイントの解説記事を書くことにしました。
見出しデザインのまとめサイトで公開されているコードはコピペで使えるので、理屈がわからなくても実装できますが、それだと応用が効かないし、性格的に理解（納得）できないとモヤモヤするので… ＾＾；
※記事内のサンプルコードは サルワカさん の記事をお手本にさせていただいています。
・CSSの基本はわかる
・position: relative / absolute はわかる
・疑似要素（::after）はわかる
Contents
2色の下線がついた見出しの完成形
今回の見出しの完成形はこんな感じです。
下線が2色になっています。
1色なら border-bottom で実装できますが、2色はそんなにシンプルにはいきません 笑
２色の下線のサンプルコードは下記になります。
See the Pen
VwPbPxy by あやたろう@独女リゾートエンジニアの卵 (@aya2kiku)
on CodePen.
h1要素の下線（水色）に、疑似要素の下線（ピンク）を 重ねて 2色に見せています。
※2つの要素を横方向にくっつけているのではありません。
このサンプルコードをもとに、私が迷ったポイントを解説していきます。
迷ったポイント① display: block; は必要？
疑似要素「::after」の規定はインライン要素なので、ブロック要素にするために必要なコードになります。
疑似要素の規定は「インライン」です！
擬似要素について調べていた時、
「疑似要素は、ブロック要素に使えばブロック要素に、インライン要素に使ったらインライン要素になる」
と書かれているサイトを最初に見てしまい、それが正だと思いこんでしまいました。
だとすると、今回のサンプルコードの場合、
「h1はブロック要素なので疑似要素もブロック要素」
ということになりますが、疑似要素に「display: block;」を指定するのとしないのとで結果が変わる…という事態に陥り混乱しました… 泣
迷ったポイント② bottom の値はナゼそうなるの？
２色の border と同じ値の分だけ、マイナス方向にズラしています。
言ってしまうとそれだけなのですが、「ナゼそうなるの？」っていうところを解説していきます。
① 黄色がh1要素、水色がh1要素の下線だとします。
② 疑似要素（ピンク）を「bottom: 0px;」で追加してみると、h1要素（黄色）の下ピッタリになり、h1要素の下線（水色）の上に配置されてしまいます。
③ h1要素の下線（水色）に擬似要素（ピンク）を重ねるために、h1要素の下線（水色）の幅と同じ分だけ、疑似要素（ピンク）を下にずらします。
④ h1要素の下線（水色）の上に擬似要素（ピンク）が重なり、2色の下線が完成します！
見出しに2色の下線をつけるCSSのポイントまとめ
- もとの要素の下線の上に、疑似要素を重ねてつくる（横方向にくっつけるのではない）
- もとの要素と疑似要素の border-bottom は同じ値にする
- 疑似要素を display: block; でブロック要素にする
- 疑似要素を下線の幅と同じだけ下にずらす
下線の幅を変えてみたり、displayの値を変えてみたり、色々と試してみてください ＾＾
