首頁 >web前端 >css教學 >如何在 CSS 中的偽元素內容 ::after 或 ::before 新增換行符?

如何在 CSS 中的偽元素內容 ::after 或 ::before 新增換行符?

Susan Sarandon
Susan Sarandon原創
2024-11-15 05:43:02518瀏覽

How to Add Line Breaks to ::after or ::before Pseudo-Element Content in CSS?

在偽元素內容的::after 或::before 處添加換行符

問題:

訪問時如何向::after 或::before 偽元素的content屬性添加多行標記僅限於 CSS?

答案:

「content」屬性允許使用「A」轉義序列插入換行符號。但是,為了防止換行,請將 'white-space' 屬性設為 'pre' 或 'pre-wrap'。

範例:

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

為了更強大的轉義,請使用" 0000a」而不是「A」來處理任意輸入,如以下程式碼所示:

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

以上是如何在 CSS 中的偽元素內容 ::after 或 ::before 新增換行符?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn