今回は、擬似要素「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）
の話でした。
ありがとうございました。