Wie füge ich Zeilenumbrüche zu ::after oder ::before Pseudoelementinhalten in CSS hinzu?

Adding Line Breaks to ::after or ::before Pseudo-Element Content

Question:

How do you add multiple lines to the content property of a ::after or ::before pseudo-element when access to the markup is limited to CSS?

Answer:

The 'content' property allows line breaks to be inserted using the "\A" escape sequence. However, to prevent line wrapping, set the 'white-space' property to 'pre' or 'pre-wrap'.

Example:

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

For more robust escaping, use "\00000a" instead of "\A" to handle arbitrary input, as seen in this code:

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

Das obige ist der detaillierte Inhalt vonWie füge ich Zeilenumbrüche zu ::after oder ::before Pseudoelementinhalten in CSS hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!