title: Pure css gradually change text on hover
body: <p>I'm trying to gradually change an element's text while hovering, however it's not working for me.</p>
  
  <p>I have this CSS:</p>
  
  <pre><code>.author-details &gt; div a {
      display: inline-block;
      width: 30%;
      float: none !important;
      background-color: #1ABC9C;
      color: #fff;
      padding: 2% 3% 2% 3%;
      border-radius: 7%;
      font-weight: normal;
      font-size: 16px;
  
      -webkit-transition: background 0.35s linear;
      -moz-transition: background 0.35s linear;
      -ms-transition: background 0.35s linear;
      -o-transition: background 0.35s linear;
      transition: background 0.35s linear;
  
      -webkit-box-shadow: 0px 5px 13px -8px rgba(0,0,0,0.45);
      -moz-box-shadow: 0px 5px 13px -8px rgba(0,0,0,0.45);
      box-shadow: 0px 5px 13px -8px rgba(0,0,0,0.45);
  }
  
  .author-details &gt; div a:after {
    content: 'Others';
  }
  
  .author-details &gt; div a:hover {
      background-color: #5DADE2;
  }
  
  .author-details &gt; div a:hover:after {
      -webkit-animation:fade-in 0.35s ease-in;
  }
  
  @-webkit-keyframes fade-in{
  0%{
      opacity:1;
      top:0px;
  }
  50%{
      opacity:0;
      top:-5px;
      content: 'Me';
  }
  100%{
      opacity:1;
      top:-5px;
  }
  </code></pre>
  
  <p>}</p>
  
  <p>And this HTML:</p>
  
  <pre><code>&lt;div&gt;&lt;label&gt;View as:&amp;nbsp;&amp;nbsp;&lt;/label&gt; &lt;a href ="#" onClick="return false" onmousedown="javascript:swapContent('con1');"&gt;&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>However when I'm hovering on the element the text doesn't change. I want to make it change to "Me" when I'm hovering over it and return to "Others" when I'm not. How can I do that?</p>
  
  <p>Here's a jsFiddle: <a href="http://jsfiddle.net/2fgy912p/" rel="nofollow">http://jsfiddle.net/2fgy912p/</a></p>