Search code examples
javascripthtmldomqueryselector

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

I'm looking for a DOM selector (read css or javascript selector) that allows me to get the text that is inserted by an element's ::after modifier.

minimum code example:

p.something::after {
  content: "content is now readable";
  background-color: yellow;
  color: red;
  font-weight: bold;
}
<p class='something'></p>
<p>
  Something else
</p>

So to rephrase the question, how can I get the content of the first paragraph (content is now readable) using javascript/css selectors.

I would like to exclude any libraries as they may not be available and am looking for a vanilla JS or CSS answer.

Solution

  • Try getComputedStyle together with it's second argument:

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

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

    More information can be found at MDN: getComputedStyle