CSS attr() 语法
在 CSS 中，attr() 函数用于从 HTML 元素的属性中获取值，并将其用作 CSS 属性的值。
大多数情况下，attr() 都是结合 content 属性一起使用，然后作为伪元素（即 ::before 和 ::after）的内容。
语法：
content: attr(属性名);说明：
这里的 “属性名” 指的是 HTML 元素的属性名称，可以是内置属性，也可以是自定义属性。
对于 attr() 函数，小伙伴们需要清楚以下几点：
- attr() 函数主要用于获取 HTML 元素的属性值，例如 data-*（自定义属性）、title、href 等。
- 虽然 CSS 规范计划扩展 attr() 的用法，但目前绝大多数浏览器仅支持在 content 属性中使用 attr()。如果尝试将其用于宽度、颜色等其他属性，可能会无法生效。
提示: attr 是 “attribute（属性）” 的缩写。
CSS attr() 摘要
| 属于 | CSS 函数 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS attr() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS attr() 函数是如何使用的。
示例 1：attr() 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a::after {
content: " (" attr(href) ")";
}
</style>
</head>
<body>
<a href="https://www.lvyenet.com">绿叶网</a>
</body>
</html>页面效果如下图所示。
分析：
a::after {
content: " (" attr(href) ")";
}上面代码表示使用 attr(href) 来获取 a 元素的 href 属性值，然后将其作为 content 属性的值。由于这里使用了伪元素（::after），因此最终会将 content 属性的值放到 a 元素内部的末尾处。
上面这种动态生成伪元素的内容，是 attr() 最常见的使用场景。
注意: href 是一个 HTML 属性，而 content 是一个 CSS 属性。
示例 2：attr() 结合 data-* 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div::before {
content: attr(data-label);
color: hotpink;
}
</style>
</head>
<body>
<div data-label="提示：">绿叶网</div>
</body>
</html>页面效果如下图所示。
分析：
content: attr(data-label); 表示使用 attr() 函数来获取 div 元素的 data-label 属性值，然后作为 content 属性的值。其中，data-label 是一个自定义的 HTML 属性。
示例 3：attr() 实现工具提示效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.tooltip {
position: relative;
top: 100px;
left: 100px;
}
.tooltip:hover::after {
content: attr(data-title);
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background-color: lightskyblue;
padding: 5px;
border-radius: 3px;
white-space: nowrap;
}
</style>
</head>
<body>
<span class="tooltip" data-title="为好教程，全力以赴"> 绿叶网 </span>
</body>
</html>默认情况下，页面效果如下图 1 所示。当鼠标移到 span 元素上时，页面效果如下图 2 所示。
分析：
content: attr(data-title); 表示使用 attr() 函数来获取 div 元素的 data-label 属性的值，然后作为 content 属性的值。
