如何使用attr()在::before伪元素内容中添加换行符

你当前代码里的\a在HTML data属性中会被当作普通字符串解析，无法触发换行效果。以下是两种纯HTML/CSS的解决方案：

方案一：使用HTML换行实体 
 #

修改HTML的data-average属性，用
替代\a：

<span id="timer-container" title="11" data-average="0:00 &#10; 0:00">
    <p id="hours">0</p>
    <p class="seperation">:</p>
    <p id="minutes">0</p>
    <p class="seperation">:</p>
    <p id="seconds">0</p>
    <p class="seperation">.</p>
    <p id="milliseconds">00</p>
</span>

CSS代码保持不变：

#timer-container::before {
    content: attr(data-average);
    white-space: pre;
    font-size: 17px;
}


是换行符（LF）的HTML实体，结合white-space: pre会被识别为换行。

方案二：直接插入实际换行 #

在HTML的data-average属性值中直接敲回车插入换行：

<span id="timer-container" title="11" data-average="0:00
0:00">
    <p id="hours">0</p>
    <p class="seperation">:</p>
    <p id="minutes">0</p>
    <p class="seperation">:</p>
    <p id="seconds">0</p>
    <p class="seperation">.</p>
    <p id="milliseconds">00</p>
</span>

同样依赖CSS的white-space: pre来保留这个实际换行，实现多行显示。

内容的提问来源于stack exchange，提问作者W4IT