在伪元素的 attr() 中使用元素的内容

Question

我有以下文字：

<span class="page-number">42</span>

我想创建一个伪元素，如下所示：

<span class="page-number">42</span>

这样伪元素的内容就是元素的文本，在本例中为 42。我可以通过一些技巧来做类似的事情吗？

Answer 1

在or伪元素内使用data-*属性（即：data-number）和 CSS attr()getter 函数：::before::after

span::after {
  content: attr(data-number);
}

<span class="page-number" data-number="Item No.42">42</span>