如何仅使用CSS获取HTML元素的内容？

我一开始使用CSS时，以为没法获取元素的属性，后来发现可以用attr()方法获取元素属性，比如获取<abbr>的title属性：

abbr::before{
  content:attr(title);
  color:red
}

<abbr title="the title">
  Content Test
</abbr>

现在我想知道：能不能仅通过CSS获取元素的文本内容，比如上面示例里的「Content Test」？

答案 #

目前标准CSS没有原生方法能直接获取元素的文本内容并像attr()调用属性那样复用。attr()函数仅支持读取元素的HTML属性值，无法访问元素内部的文本或子节点内容。

如果需要在CSS中复用元素文本内容，只能通过间接方式实现，但都需要额外配合：

• 方案一：自定义属性存储内容
  把元素文本内容同时写入一个自定义HTML属性（比如data-content），再用attr()调用这个属性：

  abbr::before {
    content: attr(data-content);
    color: blue;
  }
  

  <abbr title="the title" data-content="Content Test">
    Content Test
  </abbr>
  

  这种方式本质是把内容提前存在属性里，并非直接获取元素原有内容。

• 方案二：借助JavaScript赋值CSS变量
  通过JS把元素文本内容赋值给CSS变量，再在CSS中使用这个变量，但这已经用到了JS，不符合「仅通过CSS」的要求。

内容的提问来源于stack exchange，提问作者Han Han