How to edit a pseudo element on focus using css or jQuery

Question

Hello I would like to remove a pseudo :after element when an input field is clicked. I know that I should use :focus but some reason I cant get it to work.

Here is the HTML:

<li id="field_1_1">
    <div class="ginput_container">
        <input name="input_1" id="input_1_1" type="text">
        ::after
    </div>
</li>

The :after element is caused by this css:

#field_1_1 .ginput_container_text:after {
    content: "\25CF";
    position: absolute;
}

My goal is to remove this :after element when a user clicks on the input field. I have tried CSS and jQuery and I couldn't get either to work.

Here is what I tried using CSS:

#footer-form #input_1_1:focus #field_1_1 .ginput_container_text:after {
    display: none;
}

And here is what I tried using jQuery:

jQuery("#field_1_1").click(function(){
    jQuery("#field_1_1 .ginput_container_text:after").remove();
});

Does anyone have any suggestions?

Thanks

Possible duplicate of: http://stackoverflow.com/questions/17788990/access-the-css-after-selector-with-jquery — Louys Patrice Bessette, Sep 30 '16 at 22:20
Your solution with the :focus input overriding the styles and setting :after to display:none should work. If it's not, it's because you likely have the element hierarchy wrong. As an alternative, I've provided a way to solve it with jQuery that might make sense. If you provide your HTML as well we might be able to fix the CSS — isick, Sep 30 '16 at 22:25

score 3 · Accepted Answer · answered Sep 30 '16 at 22:20

You cannot modify a pseudo element in jQuery. Your best option is to modify that pseudo element in CSS with an additional class indicating the element's alternate state and then simply remove or add that class in jQuery.

For example,

#field_1_1 .ginput_container_text:after {
    content: "\25CF";
    position: absolute;
}
#field_1_1.clicked .ginput_container_text:after {
    display:none;
}

and

jQuery("#field_1_1").click(function(){
    this.addClass('clicked');
});

Vijai · Answer 2 · 2016-09-30T22:56:46.623

1

I have inserted a new Class with blank ::after Content and it worked! It may be a work around to just remove the content for this scenario.

jQuery("#field_1_1").click(function(){
  jQuery("#field_1_1 .ginput_container").addClass('removeAfterMe');
  
});

.ginput_container::after {
    content: "ByeBye";
    position: absolute;
}

.ginput_container.removeAfterMe::after {
    content: "";
    position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="field_1_1">
    <div class="ginput_container">
        <input name="input_1" id="input_1_1" type="text">
    </div>
</li>

edited Sep 30 '16 at 22:56

answered Sep 30 '16 at 22:23

Vijai

2,369
3
25
32

He wants it removed only when an element is clicked. – isick Sep 30 '16 at 22:25
thanks for your answer, this works just about the same as isicks answer and he answered before you so I accepted his answer. i gave you an upvote though – cup_of Sep 30 '16 at 23:44

How to edit a pseudo element on focus using css or jQuery

2 Answers2