Access Pseudo Elements :: after and :: before and Others

Question

Access Pseudo Elements :: after and :: before and Others

Navigation

#1 by (3 votes)

1

Is it possible to access a ::after element created in 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 on.

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

No ul created ::after . I've read about putting a class in ul and calling ::after on it. But in this case I can not as I explained above.

Is there any other way?

jquery css

asked by anonymous 14.12.2015 / 17:41

1 answer

Problems with sorting an array list Difficulties in Creating Routes and Controller Laravel 5.1

score 3 · Accepted Answer

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

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

What can be done:

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