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';
}
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
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.
How change content value of pseudo :before element by Javascript
Update (2018): as has been noted in the comments, you now can do this.
You can't modify pseudo elements through JavaScript since they are not part of the DOM. Your best bet is to define another class in your CSS with the styles you require and then add that to the element. Since that doesn't seem to be possible from your question, perhaps you need to look at using a real DOM element instead of a pseudo one.
JQuery select pseudo-element :after
It's not possible to bind directly to pseudo-elements, since those are not part of the DOM, but the desired effect can be approximated by binding to a parent element and testing for an offset related to the element that the :after
acts upon:
The following renders as ELEMENT++
, where clicking on "ELEMENT" and "++" each triggers different behavior:
<span>ELEMENT</span>
span::after {
content: '++';
position: absolute;
}
span.c1 {
background: yellow;
}
span.c2::after {
background: orange;
}
const span = document.querySelector('span');
span.addEventListener('click', function (e) {
if (e.offsetX > span.offsetWidth) {
span.className = 'c2';
} else {
span.className = 'c1';
}
});
Interactive: http://jsfiddle.net/wC2p7/1/
Change the :before selector from javascript
No, you cannot access :before
or :after
from javascript, because they are not a part of the DOM. However you can still achieve your goal by using CSS classes:
<script>
document.getElementById('abc').className = "minus";
</script>
<style>
#abc:before {content: "+";}
#abc.minus:before {content: "-"}
</style>
In fact this approach is more unobtrusive, because you don't mix representation with javascript. Tomorrow you might want to change text "+/-" to say nice background images, in this case you don't have to touch javascript code at all.
Modify the css of a pseudo element using JQuery
I guess you are doing it in a bit of wrong way.
You are trying to get element using attribute, rather you should try to apply CSS on the basis of attribute
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';
}
Related Topics
Adding a Background Video with React
D3 Bar Chart Not Showing First Element in Array
How to Reasonably Animate Font Awesome Lock Icons
How to Enable the JavaScript Error/Debug Console for Safari Within Android
Jqm Ui-Content 100% Height Issue
Make the Change of "Active" Class in the Menu More Reliable When Scrolling
Change the Color of a Text in Div Using Jquery Contains
Android Webview, Loading JavaScript File in Assets Folder
How to Replay a CSS3 Animation in Reactjs
Animation for Newly Rendered Elements, But Not on Page Load
Webview Methods on Same Thread Error
Youtube API Not Working with iPad/Iphone/Non-Flash Device
Applying More in Depth Selection to the :Host CSS Pseudo Class
Run JavaScript Code in Webview
Is There a Way I Can Force Chrome to Do Subpixel Rendering for a Slow Translation