Access the css ":after" selector with jQuery [duplicate]

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 stackoverflow.com/questions/5041494/… — BigBadOwl
– BigBadOwl, Commented Jul 22, 2013 at 13:36
You can't via JQuery, but you can with JavaScirpt (Accessing CSS Rules) stackoverflow.com/questions/15087736/… — Ali Bassam
– Ali Bassam, Commented Jul 22, 2013 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). — Kroltan
– Kroltan, Commented Mar 6, 2014 at 14:31
Here's a superb solution with multiple options, including @blazemonger's below: stackoverflow.com/questions/5041494/… — David Hobs
– David Hobs, Commented May 30, 2014 at 22:49

Community · Accepted Answer · 2017-05-23 11:47:25Z

341

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, 2017 at 11:47

CommunityBot

11 silver badge

answered Jul 22, 2013 at 13:40

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

simsketch Over a year ago

Here is a great article with three options for editing pseudo-elements in js. pankajparashar.com/posts/modify-pseudo-elements-css

simsketch Over a year ago

@Kamlesh you can use this link instead... web.archive.org/web/20170715014139/https://pankajparashar.com/…

Danny Beckett · Accepted Answer · 2024-10-08 18:03:23Z

73

You can add style for :after using HTML. For example:

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

edited Oct 8, 2024 at 18:03

Danny Beckett

21k27 gold badges114 silver badges144 bronze badges

answered Jun 24, 2014 at 9:50

r0mank

8316 silver badges4 bronze badges

1 Comment

SuN Over a year ago

In jQuery: $( "<style>.wrapper:after { border-top-width: " + value + "px; }</style>" ).appendTo( "head" )

Rafa Viotti · Accepted Answer · 2015-02-12 00:11:23Z

15

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, 2015 at 0:11

Rafa Viotti

10.6k4 gold badges47 silver badges62 bronze badges

answered Feb 11, 2015 at 23:38

unpezvivo

3232 silver badges2 bronze badges

6 Comments

Pixelomo Over a year ago

this doesn't work, nice idea though

sagesolutions Over a year ago

This works for me in Firefox, Chrome and Safari

Paul Ledger Over a year ago

Doesnt work for CSS but lets me target the click event on a the :after tag

Gilberto Albino Over a year ago

jquery after is not meant to manipulate ":after" css property, but the element itself.

Jan Stanicek Over a year ago

your link to jQuery documentation explains that your response is just wrong

|

Collectives™ on Stack Overflow

Access the css ":after" selector with jQuery [duplicate]

3 Answers 3

2 Comments

1 Comment

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

6 Comments

Linked

Related