CSS の疑似要素コンテンツ::after または ::before に改行を追加するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Susan Sarandon

リリース： 2024-11-15 05:43:02

オリジナル

527 人が閲覧しました

How to Add Line Breaks to ::after or ::before Pseudo-Element Content in CSS?

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

質問:

マークアップへのアクセスが CSS に制限されている場合、::after または ::before 疑似要素の content プロパティに複数の行を追加するにはどうすればよいですか?

回答:

「content」プロパティでは、「A」エスケープシーケンスを使用して改行を挿入できます。ただし、行の折り返しを防ぐには、「white-space」プロパティを「pre」または「pre-wrap」に設定します。

例:

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

ログイン後にコピー

より堅牢なエスケープを行うには、「」を使用します。次のコードに見られるように、任意の入力を処理するには、「A」の代わりに「0000a」を使用します:

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

ログイン後にコピー

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