CSSの擬似要素を使った見出しデザイン

CSSの擬似要素を使った見出しデザイン

今学習しているフィヨルブートキャンプの課題で見出しデザインを作成。CSSだけでデザインを忘れないように備忘録として！
以下のページタイトルの横の４つの四角を２通りの記法を用いて作っていきます！！

HTMLコード：

<header class="main-header">
            <h2 class="main-header__title">ページタイトル</h2>
 </header>

擬似要素について

まずは擬似要素についてCSSのpositionを総まとめ！absoluteやfixedの使い方は？を参考。
:beforeと:afterで四角2つずつ作ってドッキングする為にborder-bottomとgradationを使っていきます。
まずは一つ目のborder-bottom！！

h2::before {
  content:"";
  display: block;
  background-color:grey;
  width:10px;
  height:10px;
  border-bottom:solid 10px black;
  position: absolute;
  left: 10px;
  top: 20px;
}

まずは左側だけいけました！４行目で上の灰色の四角を作り、７行目で下の黒い四角を作ります。サイズはwidthやheightを使って調整し、タイトルの左側に置く為にPositionを設定します。

続いては右側のです！gradationを使います！

h2::after {
  content: "";
  display: block;
  width: 11px;
  height: 20px;
  background:linear-gradient(
    180deg,
    black 0%,
    black 50%,
    grey 50%,
    grey 100%);
  position: absolute;
  left: 20px;
  top: 20px;
}

これで四角の完成です。こちらのgradationの方が書くことが多いですね。数字が見た目は複雑なので難しそうに見えるのですが、背景色を２色で分割表示する方法でわかりやすくまとめてくださっています。数字と色の割合さえわかってしまえば3色など応用もできます。

一言

初めはh2と親要素のheaderの:beforeと:afterを使って4つを作っていて、要領の悪いことをしていましたが、boder-bottom(right)を使うだけでなくgradationも使い作成出来るというとで実践。かなり勉強になりました。

もし間違いがありましたらご指摘頂けると幸いです。