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

Question

我不想使用数据集在

::before

的内容中添加换行符。

这是我的代码：

HTML：

<span id="timer-container" title="11" data-average="0:00 \a 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;
}

Answer 1

我不明白为什么这在使用 \A 时不起作用，但将其放在这里以防有帮助。

在文本编辑器（notepad++）中，我只是输入换行符而不是 ，它就可以工作了：

<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>
<style>
  #timer-container::before {
    content: attr(data-average);
    white-space: pre;
    font-size: 17px;
  }
</style>