CSS :before伪元素attr(title)换行失效，如何实现内容换行？

问题原因 #

HTML属性中的换行符（包括输入时的换行、\n、\r）在CSS通过attr()读取时会被解析为空格，导致换行无法生效。

可行解决方案 #

方案1：修改title属性内容+添加CSS样式

将title里的换行替换为HTML换行实体
，同时给伪元素设置white-space: pre-wrap;样式，让浏览器识别并渲染换行：

修改后的CSS代码

.question:hover::before {
    content: attr(title);
    position: absolute;
    width: 200px;
    background-color:#000;
    color:#fff;
    white-space: pre-wrap; /* 核心样式，保留换行并允许自动换行 */
}

修改后的HTML代码

<p class="question" title="first line&#10;second line&#10;third line">?</p>

方案2：使用自定义数据属性替代title

如果不想修改title属性（避免影响原生浏览器的title提示），可以改用自定义数据属性（比如data-tooltip），同样配合white-space: pre-wrap;：

CSS代码

.question:hover::before {
    content: attr(data-tooltip);
    position: absolute;
    width: 200px;
    background-color:#000;
    color:#fff;
    white-space: pre-wrap;
}

HTML代码

<p class="question" data-tooltip="first line
second line
third line">?</p>

原理说明 #

white-space: pre-wrap;的作用是保留文本中的换行符，同时当内容超出容器宽度时会自动换行，既实现了换行需求，又保证了内容的排版合理性。

内容的提问来源于stack exchange，提问作者Burak