如何在 CSS ::before 伪元素的 attr() 中实现换行-html教程-PHP中文网

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

在 CSS 的 content: attr(title) 中无法直接使用 A 换行符，因为 HTML 属性值中的反斜杠转义不被解析；需改用 HTML 实体并配合 white-space: pre-wrap 才能正确渲染换行。

在 CSS 的 `content: attr(title)` 中无法直接使用 `A` 换行符，因为 HTML 属性值中的反斜杠转义不被解析；需改用 HTML 实体 ` ` 并配合 `white-space: pre-wrap` 才能正确渲染换行。

在 css 伪元素（如 ::before）中通过 attr() 动态插入 html 属性值时，常见的误区是试图在 title 属性中直接写入 css 转义序列（如）。但需明确： 是 css 字符串字面量中的换行转义符，仅在 css 文件或标签内硬编码字符串时有效；它不会在 html 属性值中被自动识别或转换为换行符。

✅ 正确做法是：在 HTML 的 title 属性中使用 HTML 字符引用 （LF 换行符的十进制实体），并确保 CSS 中启用支持空白符处理的 white-space 值：

<div>
  <a href="#" title="Facebook Ads 
Performance Grader
Get ready to improve your reach…">实际链接</a>
</div>

div > a {
  white-space: pre-wrap; /* 关键：保留空格、换行，并自动换行 */
}

div > a::before {
  display: block;
  content: attr(title);
  /* 注意：无需额外设置 font-family 或 line-height，但建议保持可读性 */
}

⚠️ 注意事项：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

是换行符（Line Feed）的 HTML 十进制实体；也可用（十六进制），但更直观通用；
white-space: pre-wrap 是必需的——pre 会保留换行和空格但不自动折行，pre-line 会合并空格且忽略多个换行，而 pre-wrap 兼具二者优势：保留所有换行与空格，并在必要时自动折行；
不要使用、或 \A 等无效写法——HTML 属性不解析 CSS 或 HTML 标签语法；
若需兼容旧版 IE（已基本淘汰），注意 ::before 和 attr() 在 IE8+ 支持，但 white-space: pre-wrap 在 IE6–7 中行为略有差异，现代项目通常无需考虑。