Access Pseudo Elements ::after and ::before and Other

Question

Access Pseudo Elements ::after and ::before and Other

Asked 8 years, 9 months ago

Viewed 548 times

1

It is possible to access an element ::after raised in the CSS with jQuery ?

For example:

ul.pager{
    position: relative;
    width: 100%;
    text-align: right;
    max-width: 960px;
    z-index: 30;
    margin: auto;
    margin-top: 20px;
    display: block;
    padding: 0;
    height: 65px;
    background: url(../img/contador/contador.png) no-repeat right;
    font-size: 0px;
    &:after{
            content: "";
            width: 42px;
            right: -12px;
            height: 41px;
            position: absolute;
            background: url(../img/contador/seta-proxima.png) no-repeat center;
            top: 14px;
            transition: all 0.2s ease;
    }
    li{
        display: inline-block;
        cursor: pointer;
        &:first-child{
            >a, span{
                background: url(../img/contador/anterior.png) no-repeat center;
                height: 54px;
                width: 50px;
                right: 130px;
                position: absolute;
                top: 9px;
                transition: all 0.2s ease;
            }
            &:hover{
                > a, span{
                    transform: scale(1.1);
                }
            }
        }
        &:last-child{
            >a, span{
                background: url(../img/contador/proxima.png) no-repeat center;
                height: 59px;
                width: 50px;
                right: 80px;
                position: absolute;
                top: 9px;
                transition: all 0.2s ease;
            }
            &:hover{
                > a, span{
                    transform: scale(1.1);
                }
            }
        }
    }
}

These elements are created by render() of Laravel. It’s a pagination I’ve styled.

I need to access the element ::after with jQuery to apply a LINK. I don’t have direct access to the elements because they are created dynamically and the only thing that is defined is a class="pager" to the ul.

In the ul I created a ::after. I’ve read about putting a class on ul and call the ::after in it. But in that case I cannot as I explained above.

Is there any other way ?

I have a small impression that this question is duplicated

– Wallace Maxters

2015/12/14 at 16:43
No, it’s not duplicated. I saw her on SOEN

– Wallace Maxters

2015/12/14 at 16:48
Some references here - http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin/21709814#21709814

– Edilson

2015/12/14 at 16:50
You have more here http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript

– Wallace Maxters

2015/12/14 at 16:51

1 answer

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.

by Wallace Maxters • **102,340** points · Answer 1 · 2015-12-14T16:44:54+00:00

With jQuery it is not possible to access the pseudo elements.

What can be done is to use the functions after and before jQuery, but they will create the data in the DOM, are not only pseudo elements.

What can be done:

 $('.pager').find('ul').after('Insira o que quiser aqui');