CSS를 사용하여 의사 요소 콘텐츠에 줄 바꿈을 추가하는 방법은 무엇입니까?

Adding Line Breaks to Pseudo-Element Content Using CSS

Introduction

When adding text via ::after or ::before pseudo-elements in CSS without access to HTML or PHP, the need arises to include line breaks for multi-line content. This article addresses how to achieve this using CSS.

Adding Line Breaks

To add line breaks in the content property, use the "\A" escape sequence. However, the inserted line break is subject to the "white-space" property.

Example

To illustrate, consider the following code:

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

This will add a line break after "XXXXX" and display the content as:

Office: XXXXX
Mobile: YYYYY

Alternative Escape Sequence

If you encounter unpredictable results when using \A, it's advisable to use \00000a instead. This ensures that arbitrary strings are correctly escaped.

Example Escape Function

For convenience, you can use the following JavaScript function to escape arbitrary text and add it to a CSS style block:

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

위 내용은 CSS를 사용하여 의사 요소 콘텐츠에 줄 바꿈을 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!