ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS の疑似要素コンテンツ::after または ::before に改行を追加するにはどうすればよいですか?
擬似要素コンテンツ::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 サイトの他の関連記事を参照してください。