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

Hinzufügen von Zeilenumbrüchen zu ::after oder ::before Pseudoelement-Inhalten

Frage:

Wie fügt man der Content-Eigenschaft eines ::after- oder ::before-Pseudoelements mehrere Zeilen hinzu, wenn der Zugriff auf das Markup auf CSS beschränkt ist?

Antwort:

Die Eigenschaft „content“ ermöglicht das Einfügen von Zeilenumbrüchen mithilfe der Escape-Sequenz „A“. Um jedoch einen Zeilenumbruch zu verhindern, setzen Sie die Eigenschaft „white-space“ auf „pre“ oder „pre-wrap“.

Beispiel:

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

Für ein robusteres Escapezeichen verwenden Sie „ 0000a“ anstelle von „A“, um beliebige Eingaben zu verarbeiten, wie in diesem Code gezeigt:

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!