我试图在标题上实现缩放文本效果,而不创建额外的文本元素。尝试这样做,我使用 ::before
伪元素。然而,要创建这种效果,伪元素必须具有与实际元素相同的内容
。由于这无法在 HTML 中完成,并且在 CSS 中需要做大量工作(因为它多次定位..),因此我正在寻找一种适用于具有此效果的所有元素的通用方法。
我正在考虑使用 jQuery 方式使用 .attr()
函数来复制文本并将其附加到伪元素,但据我所知这是不可能完成的.
$(function() {
$('h1').each(function() {
var Text = "$(`this`).text()";
$('this::before').attr('content', Text);
});
});
还有其他选择吗?
<小时/><子> 目前CSS效果比较简单。
:before {
transform: scale(1.5)
opacity: .2
content: "text here"
}
最佳答案
您无法使用 javascript 访问 psuedo 元素,但可以使用 CSS 访问元素。 检查片段。
h1::before{
content: attr(data-before);
}
<h1 data-before="Before Content">
Some Content
</h1>
我猜你甚至不需要 javascript。编辑了片段。
关于jquery - 自动将文本从元素复制到:before content attribute,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46332165/