attr()

CSS表达式 attr()用来获取选择到的元素的某一HTML属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。

示例 

a:after{content:"("attr(href)")"; font-size: 12px;}

浏览器支持

IE浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
IE8以上版本的浏览器都支持 attr() 函数

语法：

attr ( attribute-name <type-or-unit> ?[, <fallback> ]?)

取值

  • attribute-name ：是CSS所引用的HTML属性名称。
  • <type-or-unit> 表示所引用的属性值的单位。如果该单位相对于所引用的属性值不合法，那么attr()表达式也不合法。若省略，则默认值为 string 。其合法值包括：
    关键字 类型 备注 默认值
    string <string> 属性值将被解析为 <string> 空字符串
    color 还处于实验阶段 <color> 属性值将被解析为#xxx、#xxxxxx或关键字的形式，且必须为合法CSS <string> 值。
    前缀与后缀空格将被截掉。     		当前颜色
    url 还处于实验阶段 <uri> 属性值将被解析为可用于 url() 函数的字符串。
    相对URL是根据HTML文档的路径解析，而不是样式文件所在的路径。
    前缀与后缀空格将被截掉。     		URL about:invalid ，表示资源不存在。
    integer 还处于实验阶段 <integer> <integer>。若不是合法值（不是整数或超出CSS属性规定的数字范围），则使用默认值。前缀与后缀空格将被截掉。 0 ，或该属性允许的最小值（如果0是不合法的值）。
    number 还处于实验阶段 <number> <number>。若不是合法值（不是数字或超出CSS属性规定的数字范围），则使用默认值。前缀与后缀空格将被截掉。 0 ，或该属性允许的最小值（如果0是不合法的值）。
    length 还处于实验阶段 是用于表示距离尺寸的 CSS 数据类型。 <length> 是用于表示距离尺寸的 CSS 数据类型。 <length> ，带单位，比如 12.5em 。若不是合法值（不是长度值或超出CSS属性规定的范围），则使用默认值。
    若属性值是一个相对长度， attr() 会将其计算为绝对长度。
    前缀与后缀空格将被截掉。     		0 ，或该属性允许的最小值（如果0是不合法的值）。
    em , ex , px , rem , vw , vh , vmin , vmax , mm , cm , in , pt , or pc 还处于实验阶段 是用于表示距离尺寸的 CSS 数据类型。 <length>

    <number> ，不带单位，如 12.5 ，并被解释为带有所规定单位的是用于表示距离尺寸的 CSS 数据类型。 <length> 值。若不是合法值（不是长度值或超出CSS属性规定的范围），则使用默认值。
    若属性值是一个相对长度， attr() 会将其计算为绝对长度。
    前缀与后缀空格将被截掉。

    		0 ，或该属性允许的最小值（如果0是不合法的值）。
    angle 还处于实验阶段 <angle> <angle> ，带单位，如 30.5deg 。若不是合法值（不是角度值或超出CSS属性规定的范围），则使用默认值。
    前缀与后缀空格将被截掉。     		0deg ，或该属性允许的最小值（如果0deg是不合法的值）。
    deg , grad , rad 还处于实验阶段 <angle> <number> ，不带单位，如 12.5 )，并被解释为带有所规定单位的 <angle> 值。若不是合法值（不是角度值或超出CSS属性规定的范围），则使用默认值。
    前缀与后缀空格将被截掉。     		0deg ，或该属性允许的最小值（如果0deg是不合法的值）。
    time 还处于实验阶段 code><time> code><time>，带单位，如 30.5ms 。若不是合法值（不是时间值或超出CSS属性规定的范围），则使用默认值。
    前缀与后缀空格将被截掉。     		0s ，或该属性允许的最小值（如果0s是不合法的值）。
    s , ms 还处于实验阶段 code><time> code><time>，不带单位，如 30.5 ，并被解释为带有所规定单位的 code><time>值。。若不是合法值（不是时间值或超出CSS属性规定的范围），则使用默认值。
    前缀与后缀空格将被截掉。     		0s ，或该属性允许的最小值（如果0s是不合法的值）。
    frequency 还处于实验阶段 <frequency> <frequency> ，带单位，如 12.5kHz )。若不是合法值（不是频率值或超出CSS属性规定的范围），则使用默认值。
    前缀与后缀空格将被截掉。     		0Hz ，或该属性允许的最小值（如果0Hz是不合法的值）。
    Hz , kHz 还处于实验阶段 <frequency> <frequency> ，不带单位，如 12.5 )，并被解释为带有所规定单位的 <frequency> 值。若不是合法值（不是频率值或超出CSS属性规定的范围），则使用默认值。
    前缀与后缀空格将被截掉。     		0Hz ，或该属性允许的最小值（如果0Hz是不合法的值）。
    % 还处于实验阶段 表述一个百分比值。许多 CSS 属性可以取百分比值，经常用以根据父对象来确定大小。 <percentage> <number> ，不带单位，如 12.5 )，并被解释为带有所规定单位的表述一个百分比值。许多 CSS 属性可以取百分比值，经常用以根据父对象来确定大小。 <percentage> 值。若不是合法值（不是数字或超出CSS属性规定的范围），则使用默认值。
    若属性值用作长度， attr() 将其计算为绝对长度。
    前缀与后缀空格将被截掉。     		0% ，或该属性允许的最小值（如果0%是不合法的值）。
  • <fallback> ：如果HTML元素缺少所规定的属性值或属性值不合法，则使用 <fallback> 值。该值必须合法，且不能包含另一个 attr() 表达式。如果 attr() 不是所在CSS属性值的唯一值，其 <fallback> 值必须为 <type-or-unit> 所指定的类型，否则CSS会使用相应 <type-or-unit> 定义的默认值（见上表）。

实例 

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
<meta charset="utf-8"/>
<style>
div:after{
	content:attr(title);
}
</style>
</head>
<body>
<div ></div>
</body>
</html>

效果图：

上篇： <ident>

下篇： text-overflow