擬似要素before＆afterを使ってボーダーを作る

擬似要素::before・::afterは、要素の前後にテキストを追加するだけではなく、装飾などをつける時にも使用することができます。

↑のようなデザインの見出をどのように表現するか書いていきます

まず、Aboutは見出しh2でマークアップします。

<h2>About</h2>

このような形で記述しようと思います。

まずh2を基準にし、組んでいきます。
まずは、元になるh2を記述し、1つ目のボーダーを作ります。

h2 {
	border-bottom: 3px solid #656264;
	position: relative;
	padding-left: 10px;
}

ボーダーの左端から、「About」までの余白はpadding-leftであけました。

次に、beforeを使って2本目のボーダーを用意します。

h2::before {
	content: ' ';
	display: block;
	width: calc(100% - 15px);

	height: 1px;
	background: #656264;
	position: absolute;
	bottom: -7px;
	left: 0;

}

h2のボーダーよりも少し短いので、横幅100%からその分をマイナスします。calcは単位が異なる数字を計算してくれます。

position: absolute;で絶対配置にし、bottom、leftで場所を指定します。
h2にposition: relative;を入れたので、基準はh2です。

3本目のボーダーは、beforeをコピペで簡単です。

h2::after {
	content: ' ';
	display: block;
	height: 1px;
	width: calc(100% - 20px);
	background: #656264;
	position: absolute;
	bottom: -9px;
	left: 0;
}

下にずらしたいのでbottomのみ数字が変わっています。その他は同じですね＾＾

共通部分はまとめて書くと調整時に便利♫

h2::before,
h2::after {
	content: ' ';
	display: block;

	height: 1px;
	width: calc(100% - 20px);
	background: #656264;
	position: absolute;
	left: 0;
}
h2::before {

     bottom: -7px;

}

h2::after {
     bottom: -7px;

}

今回は、私だったらこうするという方法を書きましたので、この他にもやり方はあると思います。

コーディングは基本ルールに則っていれば、個性の出るものだと思っているので、もっと良い方法が見つかったらまたお知らせいたしますね＾＾