複数行のテキストを CSS 擬似要素に挿入するにはどうすればよいですか?

複数行のテキストを擬似要素に挿入する

CSS の変更だけで Web ページのコンテンツを変更する場合、複数行のテキストを組み込む必要がある場合があります。 -line テキストを ::after または ::before 擬似要素に挿入します。このコンテキストでは従来の HTML 改行はサポートされていませんが、エスケープ シーケンスを利用すると解決策が得られます。

解決策

CSS コンテンツ プロパティでは、次の方法で改行を含めることができます。 「A」エスケープ シーケンスをコンテンツ文字列に埋め込みます。ただし、結果の改行は「空白」プロパティの影響を受け続けます。したがって、複数行の形式を維持するには、「white-space: pre;」を設定することが重要です。または 'white-space: pre-wrap;'。

例:

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

推奨事項

相互互換性を強化するには、 Unicode の改行を処理する場合は、「A」の代わりに「0000a」シーケンスを使用することをお勧めします。このアプローチにより、潜在的な文字列操作の不確実性の中でも正確な改行が保証されます。

以上が複数行のテキストを CSS 擬似要素に挿入するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。