Retrieving or Changing CSS Rules for Pseudo Elements

Changing CSS pseudo-element styles via JavaScript

EDIT: There is technically a way of directly changing CSS pseudo-element styles via JavaScript, as this answer describes, but the method provided here is preferable.

The closest to changing the style of a pseudo-element in JavaScript is adding and removing classes, then using the pseudo-element with those classes. An example to hide the scrollbar:

CSS

.hidden-scrollbar::-webkit-scrollbar {
   visibility: hidden;
}

JavaScript

document.getElementById("editor").classList.add('hidden-scrollbar');

To later remove the same class, you could use:

document.getElementById("editor").classList.remove('hidden-scrollbar');

Changing pseudo-element style from javascript

Since pseudo-elements do not exist in the DOM, they cannot be accessed in Javascript.
The workaround is to create a <span> instead of using :before and the same logic has to be applied.

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

In CSS:

span:after {
    content: attr(data-content) ' any other text you may want';
}

If you want to prevent the 'other text' from showing up, you could combine this with seucolega's solution like this:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});

In CSS:

span.change:after {
    content: attr(data-content) ' any other text you may want';
}

Is there any way to reset :after/:before CSS rules for an element?

There is a DOM2 API for that matter. The correct way to do this is

document.getOverrideStyle(p, ':after').display = 'none'; // or
document.getOverrideStyle(p, ':after').cssText = 'display: none !important;';

Unfortunately, no browser has implemented it. (Webkit returns null, Firefox has no such method). It looks like CSS3 doesn't even bother talking about that anymore, maybe because the usecases are very rare.

So you're gonna have to do some id/className magic as suggested above or in the other thread

How to change css pseudo-element through javascript?

Well I finally did it, I don't know if what I did is good programming but anyway it works, I needed to add a css rule so by doing this:

document.styleSheets[0].insertRule('input[type=range]::-webkit-slider-thumb 
{ background-color:' + color + ' !important; }', 0);

I was able to finally manipulate the pseudo-element (at least in chrome, next step other major browsers).
Anyway I think this is helpful to someone who wants to try something like this, I needed to search and tried many things to do this.

Thanks to everyone who tried to help me.

Manipulate ::selection pseudo-element in developer tools

You can accomplish this in Internet Explorer and Firefox by right-clicking inside the Styles panel and selecting New Rule.

1. Right-click in Styles panel
2. Select Add New Rule from context menu
3. Write new ::selection rule and add properties

Chrome has a small icon in the Styles panel that you can click to create a new Rule.

1. Click New Style Rule button in Styles panel
2. Write new ::selection rule and add properties

modify pseudo select :after in javascript

If that style comes from a CSS file, you'll have to search for it in document.styleSheets, which will be messy.

If you are open to dynamically creating a <style> element containing that CSS instead, you can modify it programmatically.

var slidingTagLiAfterStyle = document.createElement("style");
slidingTagLiAfterStyle.innerHTML =
 ".slidingTag li:after {
    content: '';
    z-index: 3;
    height: 6px;
  }";
document.head.appendChild(slidingTagLiAfterStyle);

...

slidingTagLiAfterStyle.innerHTML = slidingTagLiAfterStyle.innerHTML.replace(/height: [0-9]+px/, "height: 12px"); // or whatever you want to set it to

---

Related Topics