：afterを使用して要素の後にスペース（「」）を追加します

一部のコンテンツの後に空白を追加したいのですが、content: " ";うまくいきません。

これは私のコードです：

h2:after {
    content: " ";
}

...これは機能しませんが、これは機能します：

h2:after {
    content: "-";
}

何が悪いのですか？

説明

あなたのコードがスペースを挿入することは注目に値します

h2::after {
  content: " ";
}

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

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

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

そして、「ホワイトスペース」処理モデルから、

行末のスペース（U + 0020）で「空白」が「通常」、「nowrap」、または「行前」に設定されている場合は、それも削除されます。

解決

そのため、スペースを削除したくない場合は、またはに設定white-spaceします。prepre-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）は使用しないでください。単語間の改行を防ぐことになっています。それらは、意味論的ではない、折りたたみできないスペースとして使用することは想定されていません。

エスケープされたユニコードを介して指定する必要があることがわかりました。この質問は関連しており、答えが含まれています。

ソリューション：

h2:after {
    content: "\00a0";
}

インラインブロックコンテナーを使用して一連の個々のイベントをワークフロータイムラインに表示するため、パディングを使用する代わりにこれが必要でした。タイムラインの最後のイベントの後に矢印は必要ありません。

最終的に次のようなものになりました：

.transaction-tile:after {
  content: "\f105";
}

.transaction-tile:last-child:after {
  content: "\00a0";
}

gt（シェブロン）文字にfontawesomeを使用しました。何らかの理由で「コンテンツ：なし」。最後のタイルで配置の問題が発生していました。