如何在偽元素內容的 ::after 或 ::before 中插入換行符號？

::after 或::before 偽元素內容中的換行

自訂CSS 中::after 或::before 偽元素的內容可以增強元素的呈現。然而，在內容屬性中插入多行會帶來挑戰。

為了解決這個挑戰，CSS 提供了一種機制，使用「A」轉義序列包含換行符。下面的規則示範如何：

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

透過將“white-space”屬性指定為“pre”或“pre-wrap”，換行符將得到相應的尊重並顯示。

但是，建議在轉義任意字串時務必小心。建議使用“0000a”代替“A”，以避免新行後面的字元導致不可預測的結果。

這裡有一個JavaScript 函數，您可以使用它透過必要的轉義序列將文字新增至CSS 樣式:

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

透過這種技術，您可以輕鬆地將多行合併到::after 或::before 偽元素的content 屬性中，從而增強您的視覺呈現元素。

以上是如何在偽元素內容的 ::after 或 ::before 中插入換行符號？的詳細內容。更多資訊請關注PHP中文網其他相關文章！