CSS3中的content和attr的用法

在CSS3中，`content`和`attr`都是用于设置伪元素内容的属性。

`content`属性用于设置伪元素的内容。它可以接受一些特殊值，如`none`、`normal`、`open-quote`、`close-quote`等等。也可以接受字符串值，如`content: "Hello, world!"`。此外，`content`还可以用于插入一些特殊字符，如换行符`\a`、制表符`\9`等等。

`attr`属性用于获取HTML元素的属性值，并将其作为伪元素的内容。例如，`content: attr(data-text)`会将元素的`data-text`属性值作为伪元素的内容。可以使用`attr`属性来获取元素的任何属性值，如`attr(href)`、`attr(src)`等等。

下面是一个使用`content`和`attr`的示例：

/* 在所有带有data-text属性的元素后插入一个内容为data-text属性值的伪元素 */
[data-text]:after {
  content: attr(data-text);
}