Automatically copy text from element to :before content 属性

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 访问伪元素，但是，你可以用 CSS 访问元素。 检查片段。

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

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

我猜你甚至不需要javascript。编辑了片段。