is it possible to animate and remove the pseudo content from a element..?

3gwebtrain Published at Dev

3gwebtrain

I have a button, when a user click on the button, i am adding a "tick" mark on the button using pseudo content :before, it works fine.

But i need to remove that :before property by fadeOut() with 2sec. is it possible to do that?

here is my button css code:

button{
    border: 1px solid #1f85c3;
    height: 30px;
    color: #fff;
    padding: .4em 1em !important;
    background-image: linear-gradient(#1f96d0, #007cc2);
    position: relative;
    display: block;
    padding-right: 30px !important;
}

on click i am adding a class name right:

button.right:before{
    content: '';
    position: absolute;
    top: 50%;
    right: 0%;
    margin: -7px 0 0 -10px;
    height: 5px;
    width: 16px;
    border: solid #FFF;
    border-width: 0 0 5px 5px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
}

any advice please?

Gabriele Petrioli

Since you are adding the right class on click, you could create an empty :before pseudo-element for the button and use transitions

button:before{
    content:'';
    opacity:1;
    transition:opacity 2s linear;
}

and add opacity:0 to your button.right:before rule.

button.right:before{
    content: '';
    position: absolute;
    top: 50%;
    right: 0%;
    margin: -7px 0 0 -10px;
    height: 5px;
    width: 16px;
    border: solid #FFF;
    border-width: 0 0 5px 5px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);

    opacity:0;
}

Demo at http://jsfiddle.net/SYQ89/

(i have only added the standard property for transitions, you should add vendor specific prefixes if required..)

Collected from the Internet

Please contact [email protected] to delete if infringement.