:before & :afterの使い方

8月の終わりがそろそろ近づいてきてますね…

しかも、猛暑日が続きますね…

体調には気を付けて、水分補給もまめに取ってくださいね。

ついでに、塩分補給も忘れないようにね！

さてと、話題に戻して…

:before & :afterの使い方

他業者がデザインしたCSSの中身を見ると全く理解のできてないデザインが組み込まれてますね…

同じ技術者としてはホンマに恥ずかしいんですわ…

擬似要素タグ「:before」と「:after」

擬似要素…対象の要素の一部を指定して装飾を適用する、もしくは対象の要素に擬似的に要素を追加して装飾を適用するセレクタのことです。

beforeとafterの基本的な設定方法

テキストの前後に「『』」を付けたいときのコーディングを教えますね。

<p>こんにちは</p>

p{
	padding:0 20px;
	position:relative;/* 疑似要素の時にはこれが必要 */
}

p:before{
	content: '『';
	display: block;
	left:0;
	margin: auto;
	padding: 0;
	position: absolute;
	top:0;
}

p:after{
	content: '』';
	display: block;
	margin: auto;
	padding: 0;
	position: absolute;
	right:0;
	top:0;
}

実行結果

でも、もう一つ、CSSを簡潔にまとめてみたらスッキリすると思うので、まとめてみようか！

p{
	padding:0 20px;
	position:relative;/* 疑似要素の時にはこれが必要 */
}

p:before,
p:after{
	display: block;
	margin: auto;
	padding: 0;
	position: absolute;
	top:0;
}

p:before{
	content: '『';
	left:0;
}

p:after{
	content: '』';
	right:0;
}

見てどうでしたか？

スッキリしたでしょ！

ではまた！