DOM ::after 修饰符添加的内容的选择器

Question

我正在寻找一个 DOM 选择器（阅读 css 或 javascript 选择器），它允许我获取由元素的 ::after 插入的文本修饰符。

最小代码示例：

p.something::after {
  content: "content is now readable";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

<p class='something'></p>
<p>
  Something else
</p>

因此，换句话说，我如何使用 javascript/css 选择器获取第一段 (content is now readable) 的内容。

我想排除任何库，因为它们可能不可用，我正在寻找普通 JS 或 CSS 答案。

Answer 1

试试 getComputedStyle 和它的第二个参数：

function readAfterPseudo(el) {
  var cs = getComputedStyle(el, '::after');
  console.log(cs.content);
}

readAfterPseudo(document.querySelector('.something'))

可以在 MDN 上找到更多信息：getComputedStyle

DOM ::after 修饰符添加的内容的选择器

DOM Selector for the content that is added by the ::after modifier

html

javascript

dom

queryselector