[解決済み】 :after を使って要素の後にスペース（" "）を追加する

質問

コンテンツの後ろに空白を追加したいのですが content: " "; は動作しないようです。

これは私のコードです。

h2:after {
    content: " ";
}

...これは動作しませんが、これは動作します。

h2:after {
    content: "-";
}

何が間違っているのでしょうか？

どうすればいいですか？

説明

注目すべきは、このコードではスペースが挿入されていることです。

h2::after {
  content: " ";
}

ただし、すぐに削除されます。

から 匿名インラインボックス ,

その後、折りたたまれてしまう空白のコンテンツは は、'white-space' プロパティに従って、何も生成されません。 匿名インラインボックス

そして ホワイトスペース」処理モデル ,

行末のスペース（U+0020）に 'white-space' が設定されている場合。 normal'、'nowrap'、'pre-line' のいずれかを使用すると、それも削除されます。

解決方法

そこで、スペースを削除したくない場合は、以下のように設定します。 white-space から pre または pre-wrap .

h2 {
  text-decoration: underline;
}
h2.space::after {
  content: " ";
  white-space: pre;
}

<h2>I don't have space:</h2>
<h2 class="space">I have space:</h2>

ノンブレイキングスペース（U+00a0）は使用しないでください。これは単語と単語の間の改行を防ぐためのものです。折りたたみ不可能なスペースとして使用することは想定されておらず、セマンティックではありません。