使用属性选择器在 CSS 伪元素中换行答案

【问题标题】：Line breaks in CSS pseudo elements using attribute selector使用属性选择器在 CSS 伪元素中换行
【发布时间】：2017-06-30 14:35:05
【问题描述】：

所以我一直试图在 after 元素中换行，但我遇到了（我认为）一个有趣的怪癖。

#fourth figcaption:before
{
   content: 'Figure \A' attr(title) ' ';
   white-space: pre-wrap;  
}

这可以按照我的意愿工作，并且在属性的内容之前有一个换行符。

当我完全从 attr 获取内容时，换行符会停止渲染。

#fifth figcaption:before
{
   content: attr(title);
   white-space: pre-wrap;  
}

有谁知道为什么这会有所作为？提前致谢。

【问题讨论】：

抱歉，这里的问题不太清楚，如果我将 white-space 替换为 display: block;，它会按预期工作
我想我链接到了错误的小提琴。等一下。
我现在已经链接到正确的演示了。
哦，知道了，您的期望不正确。对于 CSS，它从属性中获得的任何值都只是一个静态值。您不能仅使用 attr() 解析该字符串。所以如果你使用\a \A，它将打印为文字文本。

【解决方案1】：

如果您使用\A 或\a 或任何类似的值作为HTML 属性的值，则只是静态值。在您的 CSS 中使用类似以下的内容不会为您的 content 属性解析此类语法

<div data-stuff="Hello \a World"></div>

和 CSS 一样

content: attr(title); 
/* 
   This will not parse \a as a line break and would rather treat it as 
   a string.
*/

如果你想在 CSS 中添加换行符，你需要在你的样式表中声明 \A 而不是 HTML 属性。因此，像

content: attr(title) '\A World'; /* works now, as your \A will be parsed by CSS */

【讨论】：