CSSの::beforeや::afterのcontent内で改行させる方法

CSSの::beforeや::afterのcontent内で改行させる方法

CSSの::beforeや::afterのcontent内で改行させる方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • ベテランカードホルダーが厳選したおすすめのクレジットカード
  • このエントリーをはてなブックマークに追加

CSSの擬似要素である::beforeや::afterのcontent内で改行させる方法をご紹介いたします。

スポンサードリンク

CSSの::beforeや::afterのcontent内で改行させる方法

::beforeや::afterのcontent内で改行させる場合、改行させたい箇所に「\A」を入れます。

.sample::before {
content: 'みなさん\Aこんにちは';
white-space: pre;
}

このように「\A」を入れることで、”みなさん”と”こんにちは”の間で改行されます。

「white-space: pre;」を入れておかないと改行されないのでご注意ください。

また、画像を使う場合も同じように改行を入れることができます。

.sample::before {
content: '画像\A' url("sample.png") '\A';
white-space: pre;
}

このように指定すれば、”画像”の後ろとsample.pngの後ろで改行されます。

あとがき

擬似要素内で改行させたいというケースはあまりないかもしれませんが、覚えておくと便利です。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。