Access pseudo class in Jquery

Question

I need this button :

<div class="myButton" id="clearBefore">Click Me</div>

To change the 'content' in the pseudo class ":before" to 'text'.

CSS

.ms-ChoiceField-input:before{    content:'Old content'; }

/*after button click content changes*/
.ms-ChoiceField-input:before{    content:'New Content'; }

HTML

<div class="checkboxHiddenSelectContainer" data-toggle="filterList" style="display: block;">
     <div class="ms-ChoiceField">
        <input class="ms-ChoiceField-input">
        <label class="ms-ChoiceField-field"">
           :before
           <span class="ms-Label">Function</span>
           :after
        </label>
     </div>
    </div>

What do you mean by toggling the class? Do you mean adding it to the element? — eavidan, Sep 24 '16 at 20:28
Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. — Zakaria Acharki, Sep 24 '16 at 20:32

score 0 · Answer 1 · answered Sep 25 '16 at 08:01

HTML:

   <div class="checkboxHiddenSelectContainer" data-toggle="filterList" style="display: block;">
     <div class="ms-ChoiceField">
        <input class="ms-ChoiceField-input">
        <label class="ms-ChoiceField-field"">
           :before
           <span class="ms-Label content1">Function</span>
           :after
        </label>
     </div>
    </div>

CSS:

.content1:before {
content:'Old content'; 
}

.content2:before {
content: 'New content';
}

JS:

$('#clearBefore').click(function() {
  $('.ms-Label').removeClass('content1').addClass('content2');
  // if wanna toggle content
  // $('.ms-Label').toggleClass('content1').toggleClass('content2');
})

score -1 · Answer 2 · answered Sep 24 '16 at 20:34

It seems you've used a pseudo class in your HTML, which should not have the effect of a pseudo class. You should use them in your CSS:

.ms-Label:before {
  content: "I am before";
}

As far as toggling goes, if I understood you correctly, you could do that by adding a class toggle to the label and changing the previous selector to .ms-Label.toggled:before

Access pseudo class in Jquery

CSS

HTML

2 Answers2