所以我一直试图在 after 元素中换行，但我遇到了(我认为)一个有趣的怪癖。
#fourth figcaption:before
{
content: 'Figure \A' attr(title) ' ';
white-space: pre-wrap;
}
这按我喜欢的方式工作，我在属性内容之前换行。
当我完全从 attr 获取内容时，换行符停止渲染。
#fifth figcaption:before
{
content: attr(title);
white-space: pre-wrap;
}
你可以在这里看到这个> http://jsbin.com/huyaxifomo/edit?html,css,output
有谁知道为什么这会有所作为？提前致谢。
最佳答案
如果您使用 \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 */
关于html - 使用属性选择器在 CSS 伪元素中换行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44848962/