如何使用 CSS 中的数据属性向伪元素内容添加换行符？

将换行符分配给 CSS 和伪元素内容中的数据属性

此查询探讨了将换行符合并到 CSS 中的可能性数据属性。用户的目标是使用伪元素的 content 属性和从 data 属性中提取的值来显示多行内容。

实现

初始方法，使用“a”作为数据属性中的换行符，被证明是不成功的。为了达到预期的结果，需要进行以下修改：

数据属性修改：

• 将“a”替换为“ "; 该 HTML 实体对应于换行符。

CSS 修改：

• content: attr(data-foo) ;: 保持显示数据属性内容的原始功能。
• background-color: black; white-space: pre; display: inline-block;: 确保内容保留其格式并显示为离散块。

最终代码：

CSS：

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
    color: white;
    white-space: pre;
    display: inline-block;
}

HTML:

<div data-foo='First line &amp;#xa; Second Line'>foo</div>

此修改允许伪元素显示多行内容，保留 data 属性中定义的换行符。

以上是如何使用 CSS 中的数据属性向伪元素内容添加换行符？的详细内容。更多信息请关注PHP中文网其他相关文章！