css - 使い方 - before after 違い




要素の後に空白( "")を追加する:after (3)

説明

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

h2::after {
  content: " ";
}

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

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

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

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

行末のスペース(U + 0020)に 'white-space'が 'normal'、 'nowrap'、または 'pre-line'に設定されている場合は、それも削除されます。

溶液

したがって、スペースを削除したくない場合は、 white-spacepreまたは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)は使用しないでください。 彼らは単語間の改行を防ぐことになっています。 それらは非折りたたみ空間として使われることは想定されておらず、それは意味論的ではありません。

私はいくつかのコンテンツの後に空白スペースを追加したいと思いますが、 content: " "; 動作していないようです。

これは私のコードです:

h2:after {
    content: " ";
}

...しかし、これは動作しません:

h2:after {
    content: "-";
}

私は間違って何をしていますか?


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

ソリューション:

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

私はこれで終わった:

h2:after {
    content: ".................................................................";
    font-size: 1px;
}




css