{"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

Css Code<\/span> <\/div> 
.span::after{ content:'foo' }<\/code><\/pre> <\/div>\n
How to change ‘foo’ to ‘bar’ 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
 
 Html Code<\/span> <\/div> 
<span>foo<\/span><\/code><\/pre> <\/div>\n
\u00a0jQuery:<\/span><\/strong><\/h4>\n
 
 Java Code<\/span> <\/div> 
$('span').hover(function(){    $(this).attr('data-content','bar');});<\/code><\/pre> <\/div>\n
\u00a0CSS:<\/strong><\/span><\/h4>\n
 
 Css Code<\/span> <\/div> 
span:after {    content: attr(data-content) ' any other text you may want';}<\/code><\/pre> <\/div>\n
To prevent the ‘other text’ from showing up, we could combine this like this:<\/p>\n
HTML:<\/span><\/strong><\/p>\n
 
 Html Code<\/span> <\/div> 
<span>foo<\/span><\/code><\/pre> <\/div>\n
\u00a0jQuery:<\/strong><\/span><\/h4>\n
 
 Java Code<\/span> <\/div> 
$('span').hover(function(){    $(this).addClass('change').attr('data-content','bar');});<\/code><\/pre> <\/div>\n
\u00a0CSS:<\/strong><\/span><\/h4>\n
 
 Css Code<\/span> <\/div> 
span.change:after {    content: attr(data-content) ' any other text you may want';}<\/code><\/pre> <\/div>\n
Add\/remove a predetermined class :<\/p>\n
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:<\/p>\n
 
 Css Code<\/span> <\/div> 
p:before {    content: "foo";}p.special:before {    content: "bar";}Then you can easily add or remove this class using jQuery :$('p').on('click', function() {    $(this).toggleClass('special');});<\/code><\/pre> <\/div>\n[ad type=”banner”]\n
You can’t 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
 
 Html Code<\/span> <\/div> 
<script type="text\/javascript">    $('span').addClass('change');<\/script><\/code><\/pre> <\/div>\n
\u00a0CSS:<\/strong><\/span><\/h4>\n
 
 Css Code<\/span> <\/div> 
span.change:after { content: 'bar' }<\/code><\/pre> <\/div>\n
you could also do:<\/p>\n
 
 Css Code<\/span> <\/div> 
$('head').append("<style>.span::after{ content:'bar' }<\/style>");<\/code><\/pre> <\/div>\n
Here is the way to access :after and :before style properties, defined in css:<\/p>\n
 
 Css Code<\/span> <\/div> 
\/\/ Get the color value of .element:beforevar color = window.getComputedStyle(    document.querySelector('.element'), ':before').getPropertyValue('color');\/\/ Get the content value of .element:beforevar content = window.getComputedStyle(    document.querySelector('.element'), ':before').getPropertyValue('content');<\/code><\/pre> <\/div>\n[ad type=”banner”]\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
     
     Java Code<\/span> <\/div> 
    jQuery('head').append('<style id="mystyle" type="text\/css"> \/* your styles here *\/ <\/style>');<\/code><\/pre> <\/div>\n
      \n
    • 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.<\/li>\n
    • This way, your element has its style exactly how you want it through CSS, with the help of JS.<\/li>\n<\/ul>\n
        \n
      • 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.<\/li>\n<\/ul>\n
         
         Css Code<\/span> <\/div> 
        $("<style type='text\/css'>span.id-after:after{content:bar;}<\/style>").appendTo($("head"));$('span').addClass('id-after');<\/code><\/pre> <\/div>\n
          \n
        • Why adding classes or attributes when you can just append a style to head<\/li>\n<\/ul>\n
           
           Css Code<\/span> <\/div> 
          $('head').append('<style>.span:after{ content:'changed \t\t\tcontent' }<\/style>')<\/code><\/pre> <\/div>\n
            \n
          • Write separate classes attached with psuedo element for each style and then using JavaScript or jQuery toggle between these classes as shown below.<\/li>\n<\/ul>\n
             
             Css Code<\/span> <\/div> 
            .green::before {    content: 'green';    color: green;}$('p').removeClass('red').addClass('green');<\/code><\/pre> <\/div>\n
              \n
            • Inject new styles to the existing document stylesheet directly either via JavaScript and the webpage will automatically reflect the new css.<\/li>\n<\/ul>\n
               
               Css Code<\/span> <\/div> 
              document.styleSheets[0].addRule('.red::before','color: green');document.styleSheets[0].insertRule('.red::before { color: green }', 0);<\/code><\/pre> <\/div>\n[ad type=”banner”]\n","protected":false},"excerpt":{"rendered":"
              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: How to change ‘foo’ to ‘bar’ using jQuery? SOLUTION 1: You could also pass the content to the pseudo element with a data […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,1208],"tags":[3814,3819,3816,3823,3820,3824,3825,3821,3822,3826,3818,3815,3817,3813,3827],"class_list":["post-1776","post","type-post","status-publish","format-standard","hentry","category-css","category-jquery","tag-access-the-css-after-selector-with-jquery","tag-changing-css-of-after-pseudoclass","tag-javascript-jquery-select-pseudo-element-after","tag-javascript-get-pseudo-element","tag-javascript-select-pseudo-element","tag-jquery-change-before-content","tag-jquery-change-pseudo-element-css","tag-jquery-css-after-content","tag-jquery-pseudo-element-click","tag-jquery-pseudo-selector","tag-manipulating-css-pseudo-elements-using-jquery","tag-modify-css-of-the-after-pseudo-element-using-jquery","tag-modify-pseudo-element-styles-with-javascript","tag-selecting-and-manipulating-css-pseudo-elements-such-as-before","tag-set-pseudo-element-properties-with-javascript"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1776","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=1776"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1776\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=1776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=1776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=1776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}