{"id":1776,"date":"2017-03-22T20:08:58","date_gmt":"2017-03-22T14:38:58","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=1776"},"modified":"2017-03-28T18:36:17","modified_gmt":"2017-03-28T13:06:17","slug":"selecting-manipulating-css-pseudo-elements-using-jquery","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/selecting-manipulating-css-pseudo-elements-using-jquery\/","title":{"rendered":"[ Solved-10 Answers ] CSS – Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery"},"content":{"rendered":"

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?<\/p>\n

For example, the stylesheet has the following rule:<\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201d.span%3A%3Aafter%7B%20content%3A\u2019foo\u2019%20%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

How to change \u2018foo\u2019 to \u2018bar\u2019 using jQuery?<\/p>\n

You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:<\/p>\n

\u00a0HTML:<\/strong><\/span><\/h4>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cspan%3Efoo%3C%2Fspan%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

\u00a0jQuery:<\/span><\/strong><\/h4>\n[pastacode lang=\u201djava\u201d manual=\u201d%24(\u2018span\u2019).hover(function()%7B%0A%20%20%20%20%24(this).attr(\u2018data-content\u2019%2C\u2019bar\u2019)%3B%0A%7D)%3B%0A\u201d message=\u201dJava Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

\u00a0CSS:<\/strong><\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201dspan%3Aafter%20%7B%0A%20%20%20%20content%3A%20attr(data-content)%20\u2019%20any%20other%20text%20you%20may%20want\u2019%3B%0A%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

To prevent the \u2018other text\u2019 from showing up, we could combine this like this:<\/p>\n

HTML:<\/span><\/strong><\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cspan%3Efoo%3C%2Fspan%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

\u00a0jQuery:<\/strong><\/span><\/h4>\n[pastacode lang=\u201djava\u201d manual=\u201d%24(\u2018span\u2019).hover(function()%7B%0A%20%20%20%20%24(this).addClass(\u2018change\u2019).attr(\u2018data-content\u2019%2C\u2019bar\u2019)%3B%0A%7D)%3B%0A\u201d message=\u201dJava Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

\u00a0CSS:<\/strong><\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201dspan.change%3Aafter%20%7B%0A%20%20%20%20content%3A%20attr(data-content)%20\u2019%20any%20other%20text%20you%20may%20want\u2019%3B%0A%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

Add\/remove a predetermined class :<\/p>\n

In this approach, you\u2019ve already created a class in your CSS with a different :after or :before style. Place this \u201cnew\u201d class later in your stylesheet to make sure it overrides:<\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201dp%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(\u2018p\u2019).on(\u2018click\u2019%2C%20function()%20%7B%0A%20%20%20%20%24(this).toggleClass(\u2018special\u2019)%3B%0A%7D)%3B%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n

You can\u2019t select pseudo elements in jQuery because they are not part of DOM.
\nBut you can add an specific class to the father element and control its pseudo elements in CSS.<\/p>\n

\u00a0jQuery:<\/strong><\/span><\/h4>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%24(\u2018span\u2019).addClass(\u2018change\u2019)%3B%0A%3C%2Fscript%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

\u00a0CSS:<\/strong><\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201dspan.change%3Aafter%20%7B%20content%3A%20\u2019bar\u2019%20%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

you could also do:<\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201d%24(\u2018head\u2019).append(%22%3Cstyle%3E.span%3A%3Aafter%7B%20content%3A\u2019bar\u2019%20%7D%3C%2Fstyle%3E%22)%3B%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

Here is the way to access :after and :before style properties, defined in css:<\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201d%2F%2F%20Get%20the%20color%20value%20of%20.element%3Abefore%0Avar%20color%20%3D%20window.getComputedStyle(%0A%20%20%20%20document.querySelector(\u2018.element\u2019)%2C%20\u2019%3Abefore\u2019%0A).getPropertyValue(\u2018color\u2019)%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(\u2018.element\u2019)%2C%20\u2019%3Abefore\u2019%0A).getPropertyValue(\u2018content\u2019)%3B%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n

    \n
  • IF you want to manipulate the ::before or ::after pseudo elements entirely through CSS, you could do it using JavaScript as shown below.<\/li>\n<\/ul>\n[pastacode lang=\u201djava\u201d manual=\u201djQuery(\u2018head\u2019).append(\u2018%3Cstyle%20id%3D%22mystyle%22%20type%3D%22text%2Fcss%22%3E%20%2F*%20your%20styles%20here%20*%2F%20%3C%2Fstyle%3E\u2019)%3B%0A%0A\u201d message=\u201dJava Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n
      \n
    • Notice how the