title: is it possible to animate and remove the pseudo content from a element..?
body: <p>I have a button, when a user click on the button, i am adding a "tick" mark on the button using pseudo content <code>:before</code>, it works fine.</p>
  
  <p>But i need to remove that <code>:before</code> property by <code>fadeOut()</code> with 2sec. is it possible to do that?</p>
  
  <p>here is my button css code:</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>on click i am adding a class name <code>right</code>:</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>any advice please?</p>