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

画像draw-a-line200

こんにちは tanaka です。

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

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

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

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

これで作ります。

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

html

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

css

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

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

結果

画像pseudo-element001

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

文字化けします

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

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

十分ご注意ください。

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

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

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

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

html

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

css

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

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

結果

画像pseudo-element001

しかし

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

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

なので

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

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

そして

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

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

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

タイトルとURLをコピーしました