Get content based on CSS pseudo class

Question

I have a CSS declaration as follows:

span.boshbashbosh:nth-child(1):active:after {
  content: 'FC';
}

I am trying to access the content (FC) it by using:

var content = window.getComputedStyle(document.getElementsByClassName("boshbashbosh:nth")[0], '::active').getPropertyValue('content');
alert(content);

However, all the alert does is show normal or none

Any advice on how to do this in plain JS? If I had 1000 of these, I wouldn't want to click/hover each one, is there a way I could dump some code into the developer console to do this?

Does this answer your question? [Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery](https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin) — Heretic Monkey, Dec 23 '19 at 20:39

Dacre Denny · Answer 1 · 2019-12-24T03:53:04.080

There are a few issues here, the main one being that the CSS selector will only return an active element during a click interaction by the user, seeing that a click interaction causes the target element to become :active.

With that in mind, you could wrap your login in a mousedown element as shown below to extract the expected content value while the corresponding span element is :active as shown:

document.addEventListener("mousedown", () => {

  /* When mouse down occours, look for the element that we want to read
  pseudo content from */
  var element = document.querySelector(".boshbashbosh:nth-child(1):active");

  if (element) {

    /* If the target element is active, read the content of the ::after
    pseudo element */
    var content = window.getComputedStyle(element, ":after")
      .getPropertyValue("content");

    alert(content);
  }
})

span.boshbashbosh:nth-child(1):active:after {
  content: 'FC';
}


/* Added for clarity/usability of snippet */
span {
  background: pink;
  margin: 1rem 0;
  padding: 1rem;
  display: block;
  height: 1rem;
}

span.boshbashbosh:active {
  background: yellow;
}

<p>Clicking first box alerts the ::after content</p>
<div>
  <span class="boshbashbosh"></span>
  <span class="boshbashbosh"></span>
  <span class="boshbashbosh"></span>
</div>

I've also replaced the getElementsByClassName() call with querySelector() to simplify the code. Hope that helps!

Update

To access the content of multiple pseduo elements, you could adapt the snippet above as follows:

document.querySelectorAll(".boshbashbosh").forEach((element) => {

    var content = window.getComputedStyle(element, ":after")
      .getPropertyValue("content");
      
    console.log(content);
});

span.boshbashbosh:nth-child(1):after {
  content: 'FC';
}
span.boshbashbosh:nth-child(2):after {
  content: 'EB';
}
span.boshbashbosh:nth-child(3):after {
  content: 'DA';
}

<div>
  <span class="boshbashbosh"></span>
  <span class="boshbashbosh"></span>
  <span class="boshbashbosh"></span>
</div>

That's great - I'll add this to the question - but I need to run the script in the developer console and for it to prompt/log. If had for example 1000 of them, I wouldn't want to do each one manually — pee2pee, Dec 23 '19 at 20:13
You're welcome - so you have thousands of `boshbashbosh` span elements and you want to log their pseduo `content` to console? — Dacre Denny, Dec 23 '19 at 20:18
Yeah - pretty much that is it - console.log() to start with but at some point I'd want to build a string and display to the user but for testing, console.log will suffice — pee2pee, Dec 23 '19 at 20:32
Is the pseudo content only present when the element is `:active`? or can `:active` be removed? I don't believe there's a way to invoke `:active` with javascript directly — Dacre Denny, Dec 23 '19 at 20:53
Active can't be removed since it's not generated by me and I have no control over it :-( — pee2pee, Dec 24 '19 at 10:38

Get content based on CSS pseudo class

1 Answers1

Update