CSS 数据属性、换行符和伪元素内容值
您能否在 CSS 数据属性中合并换行符，从而允许它们使用伪元素显示？让我们探讨一下这个场景。
考虑以下 CSS 和 HTML 代码：
1 2 3 4 | [data-foo]:after {
content: attr(data-foo);
background-color: black;
}
|
登录后复制
1 | <div data-foo="First line \a Second Line">foo</div>
|
登录后复制
在此场景中，“a”字符预计是 CSS 中的换行符，无法产生所需的结果。
解决方案：
要实现所需的行为，请修改 data 属性，如下所示：
1 | <div data-foo="First line 
 Second Line">foo</div>
|
登录后复制
说明：
-
符号表示 HTML 中的换行符。
- 向伪元素添加空白属性，通过“white-space: pre;”实现样式，保留数据属性内的空白。
- “display: inline-block;” style 允许伪元素包裹多行。
- 因此，data 属性的内容（包括换行符）将按预期呈现。
以上是CSS数据属性可以用伪元素渲染换行符吗？的详细内容。更多信息请关注PHP中文网其他相关文章！
