[解決済み] 擬似要素の ::after または ::before の内容に改行を追加する

質問

あるページの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 */
}

http://jsfiddle.net/XkNxs/

ただし、任意の文字列をエスケープする場合には \00000a の代わりに \A というのは、任意の数字または [a-f] 文字の後に改行が続くと 予測できない結果 :

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