[解決済み] 擬似要素の ::after または ::before の内容に改行を追加する
2022-05-05 20:39:32
質問
あるページのHTMLやPHPにアクセスできず、CSSによる編集しかできません。あるサイトに修正を加え、テキストを
::after
または
::before
擬似要素で、追加されたコンテンツの前後にスペースを入れる場合などには、エスケープユニコードを使用する必要があることがわかりました。
で複数行を追加するにはどうすればよいですか?
content
プロパティを使用してください。
この例では、HTMLの改行要素は を視覚化するためだけのものです。 実現したいこと
#headerAgentInfoDetailsPhone::after {
content: 'Office: XXXXX <br /> Mobile: YYYYY ';
}
解決方法は?
その
content
プロパティの状態です。
contentプロパティの後ろの文字列に"emptyA"を記述すると、生成されるコンテンツに改行が含まれるようになります。この挿入された改行は にもかかわらず、'white-space' プロパティが適用されます。 エスケープシーケンスについては、quot;文字列およびquot;文字および大文字と小文字を参照してください。
ということは、使えるんですね。
#headerAgentInfoDetailsPhone:after {
content:"Office: XXXXX \A Mobile: YYYYY ";
white-space: pre; /* or pre-wrap */
}
ただし、任意の文字列をエスケープする場合には
\00000a
の代わりに
\A
というのは、任意の数字または
[a-f]
文字の後に改行が続くと
予測できない結果
:
function addTextToStyle(id, text) {
return `#${id}::after { content: "${text.replace(/"/g, '\\"').replace(/\n/g, '\\00000a')} }"`;
}
関連
-
[CSSチュートリアル】ピュアCSSで実装した通知バーの3種類のスクロール効果
-
[css3]css3アニメーションマウスが絵の上に置かれると徐々に大きくなり、マウスが絵から離れると徐々に縮む効果
-
[CSSチュートリアル]CSS動的高さ遷移のアニメーション効果の実装の
-
[CSSチュートリアル]モバイルにおけるviewportの具体的な使い方
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] javascript(またはjQuery)を使って::beforeや::afterなどのCSS疑似要素を選択し、操作する。
-
[解決済み] 入力フィールドに :before や :after 疑似要素を使用できますか?
-
[解決済み] 擬似要素 ::before や ::after のコンテンツとして SVG を使用する方法はありますか?
-
[解決済み】CSSの:before/:after疑似要素で画像の高さを変えることはできますか?
-
[解決済み】特定の `inline-block` アイテムの前/後で改行するCSS
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル]z-indexの違い。cssのz-index: 0とz-index: autoの違い。
-
[CSSチュートリアル】検索ボックスの非表示機能を実現するCSS(アニメーションの順送り・逆戻りシーケンス)
-
[CSSチュートリアル】CSS3Animationで実現する簡単な指のクリックアニメーションの例
-
[css3]CSS3のダイヤモンドパズルは、divの背景画像を回転させない機能だけを実現するために
-
[CSSチュートリアル】CSSで実現するイメージマッピングメソッド
-
[CSSレイアウト例】CSSで中央揃えを実現する方法N種
-
[css3] CSS3を使ってヘッダーアニメーション効果を作成する
-
[css3]赤いパケットのジッター効果を実現するCSS3
-
[解決済み] CSSで要素の前に改行を挿入する方法
-
[解決済み] CSS 'content'プロパティの改行文字列?重複