如何使用CSS ::before和attr()函数将HTML属性值显示在页面上？-css教程-PHP中文网

::before 必须配合 content 和 attr() 才能显示 data 属性值；常见失效原因包括：data 属性缺失或拼写错误、overflow: hidden 裁剪、未设宽高或 position、误用单冒号、content 未声明或写在非伪元素上。

如何使用css ::before和attr()函数将html属性值显示在页面上？

::before 本身不能直接显示属性值，必须配合 content 属性和 attr() 函数才能生效；漏掉任一环节，内容就完全不渲染。

为什么 `::before { content: attr(data-label); }` 有时没反应？

常见原因不是语法错，而是 HTML 或 CSS 层面的“静默失效”：

data-label 属性在 HTML 元素上不存在，或拼写错误（比如写成 data-lable）
父元素设置了 overflow: hidden，而伪元素超出边界又被裁剪了
伪元素没设 position: absolute，又没给宽高，导致 display: inline 下无法撑开、看不见
用了单冒号 :before 写法，但在某些严格模式下（如 CSS Modules 或现代构建工具）可能被忽略，建议统一用双冒号 ::before

`attr()` 只能用在 `content` 里，且仅限伪元素

下面这些写法全部无效：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

div { content: attr(data-id); }  /* 错：普通元素不支持 content */
::before { content: attr(title); }  /* 错：没绑定到具体选择器，无上下文 */
.box::before { }  /* 错：没写 content，伪元素根本不会生成 */

正确写法必须同时满足三要素：

有具体选择器（如 .tip::before）
声明 content: attr(data-tip)（注意引号不能加在 attr() 外）
对应 HTML 元素上存在该 data- 属性：<div class="tip" data-tip="这是提示"></div>

返回值永远是字符串，且不响应 JavaScript 的 `dataset` 修改

attr() 监听的是 DOM attribute 变更，不是 property。这意味着：

el.setAttribute('data-status', 'done') → 触发更新
el.dataset.status = 'done' → 不触发更新（浏览器不认为 attribute 改变了）
attr(data-count) 返回 "42"，不是数字 42，不能用于 CSS 计算（如 width: calc(attr(data-count) * 10px) 会失败）
没有 fallback 机制：如果属性不存在，content 就是空字符串，不会显示默认值