Bagaimana untuk Menambah Pemisah Baris pada Kandungan Unsur Pseudo Menggunakan 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')} }"`;
}

Atas ialah kandungan terperinci Bagaimana untuk Menambah Pemisah Baris pada Kandungan Unsur Pseudo Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!