擬似要素「before、after」全体幅の設定はどこで行う?(HTML,CSS)

画像before-after-width-setting02

今回は、擬似要素「before、after」での全体幅の設定(width設定)は、どこで行うかの説明です。

擬似要素「before、after」は、指定先へ「子要素、display: inline」として入ります。

なので

全体幅の設定は、指定先で行います。

.test01 {
  display: block;
  width: 80px; ←ここ
  height: auto;
}

.test01::before {
  display: inline-block;
  width: 16px;
  height: 16px;
  content: "";
  background-color: black;
 
}

.test01::after {
  display: inline-block;
  width: 16px;
  height: 16px;
  content: "";
  background-color: black;
}

そして

幅の設定で実数値が必要なのは「display: block」だけです。

display: block以外は「width: auto」を入れておけば自動で幅を設定してくれます。

<「display」での「width: auto」動き>

inline   = 中身に合わせて左右が決まる
inline-block= 中身に合わせて左右が決まる
block   = 親要素content幅で左右が決まる

inline   = width: auto
inline-block= width: auto
block   = width: 80px(左右の合計を計算して入れる必要がある)

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

文字化けします

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

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

十分ご注意ください。

擬似要素「before、after」うまく行かない時も

擬似要素「before、after」は、CSS側から文字、バックスクリーン、バックスクリーン画像を入れることができ、とても便利です。

しかし

たまに、うまく行かない時もあります。

なぜでしょうか?

それは、擬似要素「before、after」が「指定先の子要素、display: inline」として入るからです。

擬似要素「before、after」は、子要素、inline

擬似要素「before、after」は「指定先の子要素、display: inline」として入ることがわかりました。

それでは

擬似要素「before、after」は、具体的にどこへ入るのでしょうか?

それは、以下の例を見てください。

<擬似要素「before、after」どこへ入る?>

それでは、擬似要素「before、after」がどこへ入るか見ていきましょう。

<p class="test01">あああ</p>

ここへ、擬似要素「before、after」入れたとします。

ほとんどの方は「兄弟要素で並んでいる」とイメージするのではないでしょうか。

間違いのイメージ

<p class="test01::before"></p>
<p class="test01">あああ</p>
<p class="test01::after"></p>

実際は、以下のような感じに入ります。

正解のイメージ

<p class="test01">
    <p class="test01::before"></p>
    あああ
    <p class="test01::after"></p>
</p>

「before、after」は「test01の子要素」になります。

(注意)「間違いのイメージ」「正解のイメージ」に書かれているコードは、あくまでイメージです。実際「before、after」は、このような使い方はできません。

<width設定は、どこに入れる?>

それでは、今回の本題「全体幅の設定(width設定)」は、どこへ入れるのでしょうか?

それは、以下の場所に入れます。

.test01 {
  display: block;
  width: 80px; ←ここ
  height: auto;
}

.test01::before {
  display: inline-block;
  width: 16px;
  height: 16px;
  content: "";
  background-color: black;
 
}

.test01::after {
  display: inline-block;
  width: 16px;
  height: 16px;
  content: "";
  background-color: black;
}

擬似要素「before、after」での全体幅の設定(width設定)は、どこで行うか

の説明は、以上です。

次は「横へ並べる時」の話です。

横へ並べる時、widthへ実数が必要なのは「display: block」だけ

横へ並べる時、実数値が必要なのは「display: block」だけです。

display: block以外は「width: auto」で幅を自動設定してくれます。

<「display」での「width: auto」動き>

inline   = 中身に合わせて左右が決まる
inline-block= 中身に合わせて左右が決まる
block   = 親要素content幅で左右が決まる

inline   = width: auto
inline-block= width: auto
block   = width: 80px(左右の合計を計算して入れる必要がある)

まとめ

擬似要素「before、after」の幅の設定は、指定先のwidthへ入れる。

幅の設定(width設定)が必要なのは「display: block」だけです。

inline   = width: auto
inline-block= width: auto
block   = width: 80px(左右の合計を計算して入れる必要がある)

以上、
擬似要素「before、after」全体幅の設定はどこで行う?(HTML,CSS)
の話でした。

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

【広告】
<20代〜30代のフリーランス、副業なら オンラインプログラミングスクール「デイトラ」>

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