Introduction

You cannot directly select ::before or ::after with JavaScript or jQuery because pseudo-elements are not real DOM nodes. They are generated boxes defined by CSS. The practical solution is to control them indirectly by changing classes, CSS custom properties, or stylesheet rules on the real element they belong to.

Why Direct Selection Does Not Work

This does not work because the pseudo-element is not part of the DOM tree:

const element = document.querySelector(".card::before");
console.log(element);

There is no actual node for querySelector to return. jQuery has the same limitation. The parent element is selectable, but the pseudo-element exists only as a styling concept created during layout and painting.

The Best Default: Drive Pseudo-Elements With CSS Variables

A clean pattern is to define the pseudo-element in CSS using a custom property, then change that property from JavaScript.

1.badge::before {
2  content: var(--badge-text, "New");
3  color: white;
4  background: crimson;
5  padding: 0.2rem 0.5rem;
6  margin-right: 0.5rem;
7}

<div class="badge" id="status">Order</div>

const status = document.getElementById("status");
status.style.setProperty("--badge-text", '"Paid"');

This works well because the pseudo-element remains defined in CSS, while JavaScript only supplies dynamic values.

Toggle Classes to Switch Pseudo-Element States

If you need a small number of predefined visual states, class toggling is usually the simplest option.

1.message::after {
2  content: "";
3}
4
5.message.success::after {
6  content: " success";
7  color: green;
8}
9
10.message.error::after {
11  content: " error";
12  color: red;
13}

const message = document.querySelector(".message");
message.classList.remove("error");
message.classList.add("success");

This is often easier to maintain than injecting raw content strings from JavaScript.

Read Computed Styles When Needed

You cannot grab the pseudo-element as a node, but you can inspect its computed style.

1const element = document.querySelector(".badge");
2const beforeStyle = getComputedStyle(element, "::before");
3
4console.log(beforeStyle.content);
5console.log(beforeStyle.color);

This is useful for debugging or for tests that need to confirm which pseudo-element styles are active.

Modify Stylesheet Rules Carefully

For global behavior or theme-level changes, you can edit a stylesheet rule directly. This is more advanced and usually less convenient than classes or CSS variables.

1const sheet = document.styleSheets[0];
2sheet.insertRule(
3  ".banner::after { content: ' updated'; color: blue; }",
4  sheet.cssRules.length,
5);

This works, but it is usually not the first choice because it couples script logic tightly to stylesheet structure and ordering.

jQuery Does Not Change the Limitation

jQuery can still help you manipulate the real element:

$(".badge").addClass("highlighted");
$(".badge").css("--badge-text", '"Featured"');

But jQuery does not make pseudo-elements selectable. It only makes the indirect techniques more concise.

Think About Accessibility and Semantics

Pseudo-elements are great for decorative labels, arrows, icons, and badges, but they are a poor place for information that must be reliably read by assistive technology or copied by users. If the content is semantically important, put it in the real HTML and style it there. A useful rule is: if removing CSS would remove essential meaning, that text probably should not live only in ::before or ::after.

Common Pitfalls

A common mistake is trying to attach events to ::before or ::after as though they were DOM elements. Event handling still belongs to the real parent element.

Another mistake is putting too much dynamic content into pseudo-elements. They are excellent for decoration and small labels, but if the content is semantically important, it often belongs in the real HTML.

It is also easy to forget that the CSS content property needs properly quoted strings when set through custom properties or inserted rules.

Summary

• '::before and ::after cannot be selected directly because they are not DOM nodes.'
• Control pseudo-elements indirectly through classes, CSS variables, or stylesheet rules.
• Use getComputedStyle(element, "::before") to inspect active pseudo-element styles.
• jQuery can help manipulate the parent element, but it cannot bypass the DOM limitation.
• Prefer real HTML when the content is semantic rather than decorative.