Jquery Select Pseudo-Element :After

Access the css :after selector with jQuery

You can't manipulate :after, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript. But you can add a new class with a new :after specified.

CSS:

.pageMenu .active.changed:after { 
/* this selector is more specific, so it takes precedence over the other :after */
    border-top-width: 22px;
    border-left-width: 22px;
    border-right-width: 22px;
}

JS:

$('.pageMenu .active').toggleClass('changed');

---

UPDATE: while it's impossible to directly modify the :after content, there are ways to read and/or override it using JavaScript. See "Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after)" for a comprehensive list of techniques.

JQuery select pseudo-element :after

It's not possible to bind directly to pseudo-elements, since those are not part of the DOM, but the desired effect can be approximated by binding to a parent element and testing for an offset related to the element that the :after acts upon:

The following renders as ELEMENT++, where clicking on "ELEMENT" and "++" each triggers different behavior:

<span>ELEMENT</span>

span::after {
  content: '++';
  position: absolute;
}

span.c1 {
  background: yellow;
}

span.c2::after {
  background: orange;
}

const span = document.querySelector('span');

span.addEventListener('click', function (e) {
    if (e.offsetX > span.offsetWidth) {
        span.className = 'c2';
    } else {
        span.className = 'c1';
    }
});

Interactive: http://jsfiddle.net/wC2p7/1/

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

In CSS:

span:after {
    content: attr(data-content) ' any other text you may want';
}

If you want to prevent the 'other text' from showing up, you could combine this with seucolega's solution like this:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});

In CSS:

span.change:after {
    content: attr(data-content) ' any other text you may want';
}

Select pseudo-elements with jquery

Not sure that would work exactly the same as with :before, but what if you used jQuery to insert a <span>-tag instead, and then adjust the CSS of the <span>? I.e.

$(".nav li a:first-child:nth-last-child(2)").prepend('<span class="before-hack" />');
$('.before-hack').css(...);

Here's a fiddle: http://jsfiddle.net/Niffler/287y3s4s/9/

Pseudo after element css properties are not working in jquery

you cannot target pseudo element in jQuery so i have created 1 class changed

.changed:after{
 background-color: yellow;
}

and toggled that class when hover in jQuery.

Hope this helps. thanks

$(document).ready(function() {  $('.box').hover(function() {    $(this).toggleClass('changed');  });});

.box {  position: relative;  width: 50px;  height: 50px;  background-color: red;}
.box:after {  content: '';  position: absolute;  top: 133%;  width: 50px;  height: 50px;  background-color: green;}
.content {  position: absolute;  left: 50px;  width: 0;  height: 50px;  background-color: blue;  transition: all 0.5s linear;}
.box:hover .content {  width: 600px;  transition: all 0.5s linear;}
.changed:after{ background-color: yellow;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><div class="box">  <div class="content"></div></div>

---

Related Topics