Access the css ":after" selector with jQuery

Question

I have the following css:

.pageMenu .active::after {
    content: '';
    margin-top: -6px;
    display: inline-block;
    width: 0px;
    height: 0px;
    border-top: 14px solid white;
    border-left: 14px solid transparent;
    border-bottom: 14px solid white;
    position: absolute;
    right: 0;
}

I'd like to change the border-width of the top, left, and bottom border using jQuery. What selector to I use to access this element? I tried the following but it doesn't seem to be working.

$('.pageMenu .active:after').css(
        {
            'border-top-width': '22px',
            'border-left-width': '22px',
            'border-right-width': '22px'
        }
    )

Have a look at this answer http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-e-g-before-and-after — BigBadOwl, Jul 22 '13 at 13:36
You can't via JQuery, but you can with JavaScirpt (Accessing CSS Rules) http://stackoverflow.com/questions/15087736/change-the-divafter-border-right-color-by-jquery/15088868#15088868 — Ali Bassam, Jul 22 '13 at 13:43
@AliBassam What you just said makes no sense. jQuery IS Javascript (Actually, a convention library for it, but I hope you get the point). — This company is turning evil., Mar 06 '14 at 14:31
Here's a superb solution with multiple options, including @blazemonger's below: http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-e-g-before-and-after — David Hobs, May 30 '14 at 22:49

score 337 · Accepted Answer · edited May 23 '17 at 11:47

337

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.

edited May 23 '17 at 11:47

Community

1
1

answered Jul 22 '13 at 13:40

Blazemonger

90,923
26
142
180

Here is a great article with three options for editing pseudo-elements in js. https://pankajparashar.com/posts/modify-pseudo-elements-css/ – Elon Zito Jan 30 '16 at 15:55
2

@Kamlesh you can use this link instead... https://web.archive.org/web/20170715014139/https://pankajparashar.com/posts/modify-pseudo-elements-css/ – Elon Zito Dec 27 '19 at 15:42

score 72 · Answer 2 · edited Feb 18 '15 at 14:11

72

You can add style for :after a like html code.
For example:

var value = 22;
body.append('<style>.wrapper:after{border-top-width: ' + value + 'px;}</style>');

edited Feb 18 '15 at 14:11

ceving

21,900
13
104
178

answered Jun 24 '14 at 09:50

r0mank

821
6
4

2

This is useful for dynamic properties. Thanks! – Hugo H Oct 07 '14 at 12:49
16

In jQuery: `$( "" ).appendTo( "head" )` – SuN Nov 05 '15 at 11:38

score 14 · Answer 3 · edited Feb 12 '15 at 00:11

14

If you use jQuery built-in after() with empty value it will create a dynamic object that will match your :after CSS selector.

$('.active').after().click(function () {
    alert('clickable!');
});

See the jQuery documentation.

edited Feb 12 '15 at 00:11

Rafa Viotti

9,998
4
42
62

answered Feb 11 '15 at 23:38

unpezvivo

305
2
2

12

this doesn't work, nice idea though – Pixelomo May 15 '15 at 14:49
3

This works for me in Firefox, Chrome and Safari – sagesolutions Jul 07 '15 at 14:34
2

Doesnt work for CSS but lets me target the click event on a the :after tag – Paul Ledger Apr 27 '16 at 15:44
3

jquery after is not meant to manipulate ":after" css property, but the element itself. – Gilberto Albino Sep 06 '17 at 18:41
6

your link to jQuery documentation explains that your response is just wrong – Jan Stanicek Dec 06 '18 at 11:01
As Jan said, you link explain that you're wrong – Mateus Martins Jul 25 '19 at 17:54
1

this always returns "alert('clickable!');" either selector element has after element or not. Not working. – Kamlesh Dec 27 '19 at 14:08

Access the css ":after" selector with jQuery

3 Answers3

Linked

Related