display flexと擬似要素を使って、文字横の線の装飾を作る方法

サイトデザインでよく見かける、文字の左右にある線の装飾を作ります。
元となるHTMLコードは下のものを使います。クラスはtitleとしました。

<h2 class="title">タイトル</h2>

装飾部分は擬似要素 ::before ::after

文字横の装飾は、cssでh2のクラスであるtitleに擬似要素の::beforeと::afterを当てて実装します。

.title {
    display: flex;
    align-items: center;
}

.title::before {
    content: "";
    width: 40px;
    height: 5px;
    background-color: #333333;
    display: block;
    margin-right: 20px;
}
.title::after {
    content: "";
    width: 40px;
    height: 5px;
    background-color: #333333;
    display: block;
    margin-left: 20px;
}

content: “”; がないと線の装飾が表示されないので必須。
装飾の線は仮で横幅40px、高さ5px、色は#333333としました。

線の装飾と文字の間は ::before と ::after にそれぞれ marginを当てています。
::beforeには、装飾の右側に余白を入れたいのでmargin-right
::afterには、装飾の左側に余白を入れたいのでmargin-left

装飾と文字を横中央一列にするには display flex

装飾の線と文字を横中央の一列にするには、.titleにあてた display: flex; と align-items: center; が効いています。

コードをまとめる

先ほど説明したcssのコードの::beforeと::afterは共通のものがあるので、共通のものはまとめます。

.title {
    display: flex;
    align-items: center;
}

.title::before, .title::after {
    content: "";
    width: 40px;
    height: 5px;
    background-color: #333333;
    display: block;
}
.title::before {
    margin-right: 20px;
}
.title::after {
    margin-left: 20px;
}

応用して違う向きの装飾を作る

応用１

::beforeと::afterに当てた、widthとheightの数値を反対にすれば縦長の装飾になります。

.title::before, .title::after {
    content: "";
    width: 5px;
    height: 40px;
    background-color: #333333;
    display: block;
}

応用2

応用1に回転させるtransform: rotateを使えば、吹き出しのような形にもできます。

.title::before, .title::after {
    content: "";
    width: 5px;
    height: 40px;
    background-color: #333333;
    display: block;
}
.title::before {
    margin-right: 20px;
    transform: rotate(-30deg);
}
.title::after {
    margin-left: 20px;
    transform: rotate(30deg);
}

::beforeと::afterそれぞれ回転させる方向が逆になるので、::beforeには-30deg、::afterには30degとしています。（degは角度です。）

以上です！

webについて学んだことを忘れないようにするために＆ワードプレスの勉強もかねて、この勉強ブログをはじめてみました。初めてのこの記事は、簡単だけどよく使うdisplay flexと擬似要素を使った装飾にしてみました。
私は今までpositionを使って実装してましたが、display flexを使った方が簡単でシンプルにできますね。

コーディング初心者なので、もし載せているコーディングについておかしいなと感じた場合はコメント欄やtwitterで教えていただけると嬉しいです〜！（もれなく私のスキルとテンションが上がります。）

自分のための勉強ブログですが、私と同じくwebを勉強している方々にもこのブログが参考になればとても嬉しいです！