[CSS] 讓偽元素(::before, ::after...) content 抓取 attr 的內容可以換行

我們可以利用 CSS 偽元素的 content 屬性去抓取 html 的 attr 的內容來讓 code 更好維護，不過抓取的內容如果要換行的話是不能使用 \n 或 br 標籤的，要讓抓取的內容換行可以這麼做：

首先 html 標籤可以像這樣寫

<div data-foo='First line &#xa; Second Line'>foo</div>

這邊就是用 來代表換行的符號，接著 CSS 的部分可以這麼寫：

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
    color: white;
    white-space: pre;
    display: inline-block;
}

利用 white-space: pre 就可以把符號變成換行了。

實際範例：

不過這樣寫的話如果有限制區塊的寬度，內容預設不會換行，文字太長的話是會超過區塊寬度，所以可以把 white-space 的值設定為 pre-wrap 就好了：

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
    color: white;
    white-space: pre-wrap;
    display: inline-block;
}