自动将文本从元素复制到：内容属性

Question

我试图在我的标题上设置缩放文本效果，而不创建其他文本元素。试着这样，我正在使用::before伪元素。但是，要创建此效果，伪元素必须与实际元素具有相同的content。由于这不能用HTML完成，并且在CSS中有相当多的工作（因为它多次定位......），我正在为所有元素寻找通用方法效果。

我正在考虑使用.attr()函数来jQuery方式来复制文本并将其附加到伪元素，但据我所知，这不可能完成。

$(function() {
  $('h1').each(function() {
    var Text = "$(`this`).text()";
    $('this::before').attr('content', Text);
  });
});

有替代方案吗？

<子> 目前，效果的CSS相对简单。

:before {
  transform: scale(1.5)
  opacity: .2
  content: "text here"
}

Answer 1

您无法使用javascript访问psuedo元素，但是，您可以使用CSS访问元素。 检查代码段。

h1::before{
  content: attr(data-before);
}

<h1 data-before="Before Content">
Some Content
</h1>

我猜你甚至不需要javascript。编辑了The Snippet。