cssでborderではない独立した仕切り線は、擬似要素::before ::afterを使う

こんにちは tanaka です。

「borderではない仕切り線は、ないかな？」

と思ったことはありませんか？

擬似要素「::before」「::after」を使えばできます。

「擬似要素　＋　バックスクリーンを細くする」

これで作ります。

詳しい作り方は以下の通りです。

html

<h1 class="box01">あああ</h1>

css

.box01::after {
display: block;
content: "";　　←絶対必要

background-color: red;
width: 300px;
height: 3px;
}

結果

それでは詳しく説明します。

文字化けします

＜コピー、ペーストすると文字化けします＞

このページのコードをコピー、ペーストすると
「ダブルクオーテーションなどの一部が文字化け」
して正常に機能しなくなります。

十分ご注意ください。

仕切り線は、擬似要素でも作れる

仕切り線は、
borderだけでなく擬似要素「::before」「::after」でも作れます。

作り方は、
擬似要素「::before」「::after」とバックスクリーンを使います。

詳しくは以下の通りです。

html

<h1 class="box01">あああ</h1>

css

.box01::after {
display: block;
content: "";　　←絶対必要

background-color: red;
width: 300px;
height: 3px;
}

結果

しかし

擬似要素「::before」「::after」には注意点があります。

それは、
「content: “”」がないと機能しないということです。

なので

擬似要素「::before」「::after」を使う時は、
必ず「content: “”」を入れてください。

これで仕切り線が作れますね。

そして

そもそも「擬似要素とは何？」という方は、
以下の記事をご覧ください。

以上、
cssでborderではない独立した仕切り線は、擬似要素::before ::afterを使う
の話でした。

ありがとうございました。