是否可以访问由 css :before 规则生成的内容？答案

【问题标题】：Is it possible to access the content generated by a css :before rule?是否可以访问由 css :before 规则生成的内容？
【发布时间】：2010-03-01 18:35:23
【问题描述】：

我正在尝试使用 html5 和 css counters 对文档中的数字进行编号。图形编号 css 正在工作，但我需要能够生成包含图形编号的交叉引用。

有没有办法通过 javascript 访问这些值？我使用的计数器代码是：

body { counter-reset: section; }
section { counter-reset: figure;
          counter-increment: section; }
section section { counter-reset: section; }
section > h1:before { content: counters(section, '.'); }
.figure > .caption:before {
  counter-increment: figure;
  content: 'Figure ' counters(section, '.') '-' counter(figure); }
section > h1:before, .figure > .caption:before { margin-right: .5em; }

【问题讨论】：

使用浏览器的 DOM 检查器查看数字是否出现在 DOM 中。如果是这种情况，您可以通过 JavaScript DOM 访问它。

标签： javascript css

【解决方案1】：

根据this article：

生成的内容不会改变文档树。特别是，它是未反馈到文档语言处理器（例如，用于重新解析）。

换句话说，似乎content CSS 属性只是将文本“样式化”添加到页面，而不影响文档结构。 DOM 不知道这种样式，因此 Javascript 无法访问它。

【讨论】：