Changing the background colour of an :after - JQuery

Question

I'm trying to change the colour of an :after, using JQuery although I just can't seem to be able to change it, can anybody point me in the right direction please?

<script>
    $( document ).ready(function() {
        $( ".breadcrumb li:nth-child(1) a" ).css({'background-color' : '#f00'}); // Works
        $( ".breadcrumb li:nth-child(1):after " ).css({'background-color' : '#f00'}); // Does not work?
    });
</script>

I've tried using a few selectors but I just cannot find the correct one. Thanks in advance.

Try this `$( ".breadcrumb li:nth-child(1)").after($( ".breadcrumb li:nth-child(1)").css({'background-color' : '#f00'}));` — Amit, Feb 06 '14 at 09:27

score 3 · Answer 1 · edited May 23 '17 at 12:14

3

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

.breadcrumb li:nth-child(1) .test:after { 
    border-top-width: 22px;
    border-left-width: 22px;
    border-right-width: 22px;
}

JS

$('.breadcrumb li:nth-child(1)').toggleClass('test');

Taken from this answer

edited May 23 '17 at 12:14

Community

1
1

answered Feb 06 '14 at 09:25

Albzi

15,431
6
46
63

1

If this answer is useful please up-vote the original! – Albzi Feb 06 '14 at 09:28

score 0 · Answer 2 · answered Feb 06 '14 at 09:27

You cant change the style of the (:after) by using JQuery. but you can solve it by inserting DIV in HTML after the DIV that you use then you can handle it using JQuery

<div class="mydiv_1"></div> <div class="after_div"></div>
<div class="mydiv_2"></div>  <div class="after_div"></div>

You can adapt this example to your code/script ;)

score 0 · Accepted Answer · answered Feb 06 '14 at 09:28

Try this,

CSS

.li-active-after a{background-color : #f00; }
.li-active-after:after{background-color : #f00; }

Jquery

$( document ).ready(function() {
    $(".breadcrumb li").removeClass('li-active-after');
    $(".breadcrumb li:nth-child(1)").addClass('li-active-after');
});

score 0 · Answer 4 · answered Feb 06 '14 at 09:43

0

Rather than adding another div to replace :after or using other selectors, there is a better solution just by using class. Here it is jsfiddle Click the gray box and it will add a class to div, which will change the color of its :after

answered Feb 06 '14 at 09:43

AzDesign

1,169
1
8
18

Changing the background colour of an :after - JQuery

4 Answers4