将CSS的content属性设置为HTML括号之间的值

Question

在HTML如下所示的情况下：

<div>Text</div>

如何从这些标记（在本例中为“文本”）之间获取值，并将其作为CSS内容属性的值添加？

这就是我使用React的那个值来做的方式：

div {
    content: attr(children)
}

Answer 1

我不知道您为什么需要这样做，但是可以。我在下面提供了一个示例，但是，这将有助于您了解您的目标是什么。

var elem = document.getElementsByTagName("DIV");

elem[0].setAttribute('children',elem[0].textContent);

div:after {
  content: attr(children)
}

<div>Text</div>

Answer 2

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

<div data-text="text"></div>

我认为您想使用CSS获取文本，因此这是通过data属性和CSS获取文本的方法

<div>text</div>

    TO

<div data-text="text">
      If you want to place same text as data attr then put it
</div>

现在您可以简单地将CSS像这样

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

希望您能帮到您

谢谢