[ Solved-10 Answers ] CSS – Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

PROBLEM :

Is there any way to select/manipulate CSS pseudo-elements such as ::before and ::after (and the old version with one semi-colon) using jQuery?

For example, the stylesheet has the following rule:

[pastacode lang=”css” manual=”.span%3A%3Aafter%7B%20content%3A’foo’%20%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

How to change ‘foo’ to ‘bar’ using jQuery?

SOLUTION 1:

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

 HTML:

[pastacode lang=”markup” manual=”%3Cspan%3Efoo%3C%2Fspan%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]

 jQuery:

[pastacode lang=”java” manual=”%24(‘span’).hover(function()%7B%0A%20%20%20%20%24(this).attr(‘data-content’%2C’bar’)%3B%0A%7D)%3B%0A” message=”Java Code” highlight=”” provider=”manual”/]

 CSS:

[pastacode lang=”css” manual=”span%3Aafter%20%7B%0A%20%20%20%20content%3A%20attr(data-content)%20’%20any%20other%20text%20you%20may%20want’%3B%0A%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

To prevent the ‘other text’ from showing up, we could combine this like this:

HTML:

[pastacode lang=”markup” manual=”%3Cspan%3Efoo%3C%2Fspan%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]

 jQuery:

[pastacode lang=”java” manual=”%24(‘span’).hover(function()%7B%0A%20%20%20%20%24(this).addClass(‘change’).attr(‘data-content’%2C’bar’)%3B%0A%7D)%3B%0A” message=”Java Code” highlight=”” provider=”manual”/]

 CSS:

[pastacode lang=”css” manual=”span.change%3Aafter%20%7B%0A%20%20%20%20content%3A%20attr(data-content)%20’%20any%20other%20text%20you%20may%20want’%3B%0A%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

SOLUTION 2:

Add/remove a predetermined class :

In this approach, you’ve already created a class in your CSS with a different :after or :before style. Place this “new” class later in your stylesheet to make sure it overrides:

[pastacode lang=”css” manual=”p%3Abefore%20%7B%0A%20%20%20%20content%3A%20%22foo%22%3B%0A%7D%0Ap.special%3Abefore%20%7B%0A%20%20%20%20content%3A%20%22bar%22%3B%0A%7D%0AThen%20you%20can%20easily%20add%20or%20remove%20this%20class%20using%20jQuery%20%3A%0A%0A%24(‘p’).on(‘click’%2C%20function()%20%7B%0A%20%20%20%20%24(this).toggleClass(‘special’)%3B%0A%7D)%3B%0A” message=”Css Code” highlight=”” provider=”manual”/] [ad type=”banner”]

SOLUTION 3:

You can’t select pseudo elements in jQuery because they are not part of DOM.
But you can add an specific class to the father element and control its pseudo elements in CSS.

 jQuery:

[pastacode lang=”markup” manual=”%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%24(‘span’).addClass(‘change’)%3B%0A%3C%2Fscript%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]

 CSS:

[pastacode lang=”css” manual=”span.change%3Aafter%20%7B%20content%3A%20’bar’%20%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

SOLUTION 4:

you could also do:

[pastacode lang=”css” manual=”%24(‘head’).append(%22%3Cstyle%3E.span%3A%3Aafter%7B%20content%3A’bar’%20%7D%3C%2Fstyle%3E%22)%3B%0A” message=”Css Code” highlight=”” provider=”manual”/]

SOLUTION 5:

Here is the way to access :after and :before style properties, defined in css:

[pastacode lang=”css” manual=”%2F%2F%20Get%20the%20color%20value%20of%20.element%3Abefore%0Avar%20color%20%3D%20window.getComputedStyle(%0A%20%20%20%20document.querySelector(‘.element’)%2C%20’%3Abefore’%0A).getPropertyValue(‘color’)%3B%0A%0A%2F%2F%20Get%20the%20content%20value%20of%20.element%3Abefore%0Avar%20content%20%3D%20window.getComputedStyle(%0A%20%20%20%20document.querySelector(‘.element’)%2C%20’%3Abefore’%0A).getPropertyValue(‘content’)%3B%0A” message=”Css Code” highlight=”” provider=”manual”/] [ad type=”banner”]

SOLUTION 6:

• IF you want to manipulate the ::before or ::after pseudo elements entirely through CSS, you could do it using JavaScript as shown below.

[pastacode lang=”java” manual=”jQuery(‘head’).append(‘%3Cstyle%20id%3D%22mystyle%22%20type%3D%22text%2Fcss%22%3E%20%2F*%20your%20styles%20here%20*%2F%20%3C%2Fstyle%3E’)%3B%0A%0A” message=”Java Code” highlight=”” provider=”manual”/]

• Notice how the <style> element has an ID, which you can use to remove it and append to it again if your style changes dynamically.
• This way, your element has its style exactly how you want it through CSS, with the help of JS.

SOLUTION 7:

• Add a rule to the document with the new content and reference it with a class. depending on what is needed .the class might need an unique id for each value in content.

[pastacode lang=”css” manual=”%24(%22%3Cstyle%20type%3D’text%2Fcss’%3Espan.id-after%3Aafter%7Bcontent%3Abar%3B%7D%3C%2Fstyle%3E%22).appendTo(%24(%22head%22))%3B%0A%24(‘span’).addClass(‘id-after’)%3B%0A” message=”Css Code” highlight=”” provider=”manual”/]

SOLUTION 8:

• Why adding classes or attributes when you can just append a style to head

[pastacode lang=”css” manual=”%24(‘head’).append(‘%3Cstyle%3E.span%3Aafter%7B%20content%3A’changed%20%09%09%09content’%20%7D%3C%2Fstyle%3E’)%0A” message=”Css Code” highlight=”” provider=”manual”/]

SOLUTION 9:

• Write separate classes attached with psuedo element for each style and then using JavaScript or jQuery toggle between these classes as shown below.

[pastacode lang=”css” manual=”.green%3A%3Abefore%20%7B%0A%20%20%20%20content%3A%20’green’%3B%0A%20%20%20%20color%3A%20green%3B%0A%7D%0A%24(‘p’).removeClass(‘red’).addClass(‘green’)%3B%0A” message=”Css Code” highlight=”” provider=”manual”/]

SOLUTION 10:

• Inject new styles to the existing document stylesheet directly either via JavaScript and the webpage will automatically reflect the new css.

[pastacode lang=”css” manual=”document.styleSheets%5B0%5D.addRule(‘.red%3A%3Abefore’%2C’color%3A%20green’)%3B%0Adocument.styleSheets%5B0%5D.insertRule(‘.red%3A%3Abefore%20%7B%20color%3A%20green%20%7D’%2C%200)%3B%0A” message=”Css Code” highlight=”” provider=”manual”/] [ad type=”banner”]