疑似要素コンテンツ::after または ::before に改行を挿入するにはどうすればよいですか?

::after または ::before 擬似要素コンテンツの改行

CSS の ::after または ::before 擬似要素のコンテンツをカスタマイズすると、機能が向上します要素のプレゼンテーション。ただし、コンテンツ プロパティに複数の行を挿入すると、課題が生じます。

この課題に対処するために、CSS は、「A」エスケープ シーケンスを使用して改行を含めるメカニズムを提供します。以下のルールは、次の方法を示しています。

#headerAgentInfoDetailsPhone::after {
  content: "Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

「空白」プロパティを「pre」または「pre-wrap」として指定すると、改行が尊重され、それに応じて表示されます。

ただし、任意の文字列をエスケープする場合は注意が必要です。新しい行に続く文字によって引き起こされる予期せぬ結果を避けるために、「A」の代わりに「 0000a」を使用することをお勧めします。

必要なエスケープ シーケンスを使用して CSS スタイルにテキストを追加するために使用できる JavaScript 関数を次に示します。 :

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\"').replace(/\n/g, '\00000a')} }"`;
}

この手法を使用すると、::after または ::before 疑似要素の content プロパティに複数の行を簡単に組み込むことができ、要素の視覚的なプレゼンテーションを強化できます。

以上が疑似要素コンテンツ::after または ::before に改行を挿入するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。