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

Asked

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 ?

jquery css

  • I have a small impression that this question is duplicated

  • No, it’s not duplicated. I saw her on SOEN

  • Some references here - http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin/21709814#21709814

  • You have more here http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript

1 answer

3


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');
  • 1

    Use the .after() has not much to do with the ::after of the CSS...

Browser other questions tagged jquery css

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