CSS伪造内容可以拉出元素的文本吗？

Question

<p class="test">Lorem Ipsum Dolor.</p>

CSS伪元素的（：before /：after）内容属性可以从DOM元素的纯文本中提取吗？

.test:after{ content: html; }

结果......

 Lorem Ipsum Dolor.Lorem Ipsum Dolor.

寻找非JavaScript解决方案（如果可能的话）。

谢谢：）

Answer 1

不，目前无法检索元素的文本并使用content属性显示它而不使用JavaScript。但是，正如我在评论中指出的那样，您可以使用CSS attr() function来检索元素的属性值并显示它。

例如，您可以为元素添加自定义data-content属性：

＆＃13;

＆＃13;

[data-content]:after {
  content: attr(data-content);
}

＆＃13;

<p data-content="Lorem Ipsum Dolor."></p>

＆＃13;

＆＃13;

＆＃13;

如果要显示相同的字符串两次（如问题所示），您可以简单地使用多个attr()函数：

＆＃13;

＆＃13;

[data-content]:after {
  content: attr(data-content) ' ' attr(data-content);
}

＆＃13;

<p data-content="Lorem Ipsum Dolor."></p>

＆＃13;

＆＃13;

＆＃13;

如果您使用JavaScript，您可以简单地遍历元素并根据元素的data-content属性向元素添加自定义textContent属性：

＆＃13;

＆＃13;

[].forEach.call(document.querySelectorAll('[data-content]'), function (element) {
  element.dataset.content = element.textContent;
});

＆＃13;

[data-content]:after {
  content: ' ' attr(data-content);
}

＆＃13;

<p data-content>Lorem Ipsum Dolor.</p>

<p data-content>Some other string.</p>

＆＃13;

＆＃13;

＆＃13;

还值得一提的是，content属性的值仍然呈现为字符串（而不是HTML）。