How to manipulate CSS pseudo-elements like ::before and ::after with JavaScript or jQuery?

Other Questions JavaScript
1

Is it possible to select and modify CSS pseudo-elements such as ::before and ::after using jQuery or plain JavaScript? For instance, I have this CSS rule in my stylesheet:

.item::after { content: ‘foo’; }

What would be the approach to change the content from ‘foo’ to ‘bar’ utilizing either vanilla JavaScript or jQuery?

2

Unfortunately, CSS pseudo-elements like ::before and ::after cannot be directly targeted or modified using JavaScript or jQuery because they do not exist in the DOM tree as independent nodes. However, you can achieve the desired effect by manipulating the styles applied to those pseudo-elements through JavaScript.

To change the content of a ::before or ::after pseudo-element, consider adding or updating a CSS rule dynamically. Here's a practical example using vanilla JavaScript:

function updatePseudoElementContent(selector, pseudo, content) {
  const styleSheet = document.styleSheets[0];
  const ruleIndex = Array.from(styleSheet.cssRules).findIndex(
    rule => rule.selectorText === selector + '::' + pseudo
  );

  if (ruleIndex > -1) {
    // Modify the existing rule
    styleSheet.deleteRule(ruleIndex);
  }

  // Append the new rule
  styleSheet.insertRule(
    `${selector}::${pseudo} { content: '${content}'; }`,
    styleSheet.cssRules.length
  );
}

updatePseudoElementContent('.item', 'after', 'bar');

This function takes the selector for the element and allows you to specify which pseudo-element to modify and what content to set. It then updates the relevant CSS rule in the stylesheet, dynamically changing the pseudo-element content.

Although this approach focuses on JavaScript, you can extend it using jQuery by selecting elements but the modification of pseudo-elements' contents still needs to be done through JavaScript's CSS manipulation like shown above. Note that dynamically updated styles may not be persistently reflected if, for instance, stylesheet changes outside of JavaScript interactions occur, as these dynamic updates are session-specific.

3

You can't directly manipulate ::before or ::after with JavaScript/jQuery since they aren't in the DOM. Instead, modify their content through CSS rules dynamically. Here's how you can do it with JavaScript:

function setPseudoContent(selector, pseudo, content) {
  const styles = document.styleSheets[0];
  const index = Array.from(styles.cssRules).findIndex(
    rule => rule.selectorText === `${selector}::${pseudo}`
  );

  if (index > -1) styles.deleteRule(index);

  styles.insertRule(
    `${selector}::${pseudo} { content: '${content}'; }`,
    styles.cssRules.length
  );
}

setPseudoContent('.item', 'after', 'bar');

This function updates the ::after content from 'foo' to 'bar'.

4

Pseudo-elements like ::before and ::after can be tricky since they aren't part of the DOM. However, you can indirectly manipulate their content property by dynamically updating CSS styles. Here's a straightforward approach using JavaScript to achieve this:

function changePseudoElementContent(selector, pseudoElement, newContent) {
  const styleSheet = document.styleSheets[document.styleSheets.length - 1];
  const ruleExists = Array.from(styleSheet.cssRules).some(rule =>
    rule.selectorText === `${selector}::${pseudoElement}`
  );

  if (!ruleExists) {
    styleSheet.insertRule(
      `${selector}::${pseudoElement} { content: '${newContent}'; }`,
      styleSheet.cssRules.length
    );
  }
}

changePseudoElementContent('.item', 'after', 'bar');

This code checks if the rule already exists and adds a new rule for the specified pseudo-element. Note that this change only affects the active session, and styles will reset after a page refresh.

5

Direct manipulation of pseudo-elements like ::before and ::after using JavaScript or jQuery isn't feasible as these elements are not part of the DOM. Instead, you can adjust their properties by dynamically altering the CSS stylesheets. Below, I'll present an alternative approach using JavaScript that builds upon leveraging CSS variables to achieve this:

First, modify your CSS to include a CSS variable for the content:

 .item::after { 
  content: var(--after-content, "foo"); 
}

Then, you can employ JavaScript to change the value of the CSS variable:

function setPseudoElementContent(element, content) {
  const elem = document.querySelector(element);
  if (elem) {
    elem.style.setProperty('--after-content', `'${content}'`);
  }
}

setPseudoElementContent('.item', 'bar');

This approach involves defining a CSS custom property (--after-content), which is easier to manipulate directly via JavaScript. In this function, the setPseudoElementContent method searches for the specified element and updates the variable with the new content. This technique provides a tidy solution and allows you to control pseudo-element content dynamically without directly modifying CSS rules.

Note: This change remains effective during the current page session. Re-loading the page will reset these styles unless they are saved in cookies or local storage and applied again on page load.

6

Directly changing ::before and ::after pseudo-elements isn't possible in JavaScript due to the DOM constraints. But you can achieve this using CSS variables to update their styles dynamically. Here's a concise method:

First, define a CSS variable for your content:

.item::after { 
  content: var(--after-content, 'foo'); 
}

Then, use JavaScript to change the CSS variable:

function updateContent(selector, content) {
  const elem = document.querySelector(selector);
  if (elem) elem.style.setProperty('--after-content', `'${content}'`);
}

updateContent('.item', 'bar');

This method tweaks a CSS variable, making it easy to manage pseudo-element content through JavaScript.