web-dev-qa-db-ja.com

：after疑似要素に改行を追加できますか？

特定のクラスに<br />を追加したい。 ：after擬似クラスを使用すると、単に<br />がテキストとして表示されます。

この作品を作る方法はありますか？

IE8の内部にあるため、ブラウザの問題は問題になりません。私が行った場合

<span class="linebreakclass">cats are</span> brilliant

新しい行に「ブリリアント」を表示したい。

csspseudo-element
70
NibblyPig

HTMLタグをレンダリングすることはできませんが、次のようにスタイルを設定できます。

.needs-space:after
{
    content: " ";
    display: block;
    clear: both; /* if you need to break floating elements */
}

ここでの主な設定はdisplay: block;これは、：afterDIV内のコンテンツをレンダリングします。そして、この擬似要素はすべての最新のブラウザーでサポートされています。 IEを含む。これを言って、あなたはあなたのユーザーと彼らのブラウザに注意するべきです。

69
Robert Koritnik

\Aエスケープシーケンスを使用できます。これは改行としてレンダリングされます。

.new-line:after {
  white-space: pre-wrap;
  content: "\A";
}

このメソッドは、contentプロパティの CCS 2.1仕様 で言及されています。

作成者は、"\A"プロパティの後にある文字列のいずれかに'content'エスケープシーケンスを書き込むことにより、生成されたコンテンツに改行を含めることができます。この挿入された改行は、まだ 'white-space' プロパティの対象です。

12
Dmitry Schetnikovich

悪化します-IE6では：afterクラスは動作しません（おそらく他のブラウザも同様です）。

ここで本当に必要なのは、間隔を空けるための要素の下部のマージンです。

単に

.myElement {
    margin-bottom: 1em;
}
1
David Snabel-Caunt