在CSS中，我们可以使用伪元素来添加额外的内容或样式到HTML元素中。而attr()函数是伪元素之一，它可以用来从HTML元素属性中获取值并将其应用到CSS中。

selector::pseudo-element {
property: attr(attribute);
}

上面的代码就是使用attr()函数的格式。其中，selector表示使用伪元素的选择器，pseudo-element表示使用的伪元素名称（如before、after等），property表示要改变的CSS属性名称，而attribute是HTML元素中的属性名称。

一般来说，我们可以使用它来改变一些需要与HTML元素相关联的CSS属性，如content、background、border、color等。

以下是一些使用attr()函数的常见场景：

• 使用data-*属性来改变内容

div:before {
content: attr(data-text);
}

input[type="range"]::-webkit-slider-runnable-track {
background-color: attr(data-bg);
}

div:before {
border-width: attr(data-width);
}

当然，我们还可以使用CSS变量来将值应用到多个元素中。此时，我们需要将变量设为attr()函数的值，如下所示：

selector {
--my-var: attr(data-color);
color: var(--my-var);
}

需要注意的是，attr()函数使用的是HTML中元素的属性值，因此我们需要引用正确的属性名称来避免出现错误。同时，该函数也不允许使用负数值，因为它们与CSS中一些关键字产生歧义。