CSS中如何在::before伪元素的attr()内容里实现换行？

你尝试在<a>标签的title属性中加入\A，希望通过content: attr(title)让伪元素文本换行，但发现无效；但直接在content里写带\A的文本却能正常换行。

无效代码示例 #

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div > a {
            white-space: pre-wrap;
        }
        div > a::before {
            display: block;
            content: attr(title);
        }
    </style>
</head>
<body>
<div><a href="#" title="Facebook Ads \A Performance Grader Get  ready to improve your reach …">actual link</a></div>
</body>
</html>

为什么使用attr()时\A无法换行？ #

• CSS中直接写在content字符串里的\A是CSS转义字符，代表换行符（ASCII码10），会被浏览器解析成实际的换行。
• 而HTML属性（比如title）中的\A只是普通的字面字符（\和A两个独立字符），attr()函数仅读取属性的原始文本内容，不会对其中的\A进行CSS转义处理，因此无法触发换行。

实现attr()文本换行的方法 #

方法1：在HTML属性中使用实际换行符 #

可以直接在属性值里输入换行，或者使用HTML实体
表示换行符，同时保留white-space: pre-wrap（或pre/pre-line）的样式设置：

<!-- 直接输入换行 -->
<div><a href="#" title="Facebook Ads
Performance Grader Get  ready to improve your reach …">actual link</a></div>

<!-- 使用HTML实体 -->
<div><a href="#" title="Facebook Ads &#10; Performance Grader Get  ready to improve your reach …">actual link</a></div>

方法2：使用自定义data属性替代title #

如果不想修改title属性（毕竟它本身用于悬停提示），可以用自定义data-*属性存储带换行的文本：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div > a {
            white-space: pre-wrap;
        }
        div > a::before {
            display: block;
            content: attr(data-text);
        }
    </style>
</head>
<body>
<div><a href="#" title="Facebook Ads Performance Grader Get ready to improve your reach …" data-text="Facebook Ads &#10; Performance Grader Get  ready to improve your reach …">actual link</a></div>
</body>
</html>

方法3：使用CSS变量实现灵活控制 #

如果需要更灵活的文本管理，可以用CSS变量存储带换行的文本：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div > a {
            white-space: pre-wrap;
            --before-content: "Facebook Ads \A Performance Grader Get  ready to improve your reach …";
        }
        div > a::before {
            display: block;
            content: var(--before-content);
        }
    </style>
</head>
<body>
<div><a href="#" title="Facebook Ads Performance Grader Get ready to improve your reach …">actual link</a></div>
</body>
</html>

内容的提问来源于stack exchange，提问作者hamid-davodi