[ 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