title: CSS :hover:after Delay
body: <p>I have this CSS:</p>
  
  <pre><code>.edit:hover:after{
      content: '✐';
  }
  </code></pre>
  
  <p>I want the user to place the cursor on .edit class for 2 seconds before the content appears.</p>
  
  <p>I've tried with this kind of aproach and doesn't work:</p>
  
  <pre><code>.edit:hover{
      -webkit-transition: 2s all;   
      -webkit-transition-delay: 2s; 
      -moz-transition: 2s all;   
      -moz-transition-delay: 2s; 
      -ms-transition: .2s all;   
      -ms-transition-delay: 2s; 
      -o-transition: 2s all;   
      -o-transition-delay: 2s; 
      transition: 2s all;   
      transition-delay: 2s; 
  }
  </code></pre>
  
  <p>Also tried same code on <code>.edit:hover:after</code> and <code>.edit</code>.</p>
  
  <p>The html is a simple <code>&lt;td class='edit'&gt;</code> element.</p>
  
  <p>Is this possible with only css?</p>