title: How to make a smooth hover:after content transition?
body: <p>Here's my code :</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;button class="btn btn-primary btn-icon" title="Next"&gt;&gt;&gt;&lt;/button&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>.btn-icon:hover::after{
          content: " "  attr(title);
          transition:width 1s ease;
  }
  </code></pre>
  
  <p>I'm just learning css now, and what I'm trying is to achieve <strong>a button that shows its text only on hover</strong>, doesn't necessarily needs to be through the title attribute, I just thought it was easier and more ARIA-friendly this way.</p>
  
  <p>But the transition is not working, how can I make it show the :after content smoothly?</p>
  
  <p>JsFiddle: <a href="https://jsfiddle.net/xpvt214o/121984/" rel="nofollow noreferrer">https://jsfiddle.net/xpvt214o/121984/</a></p>
  
  <p>I tried following the linked duplicates, but to be honest I couldn't replicate it.</p>
  
  <pre><code>.btn-icon:after{
    content: " "  attr(title);
    max-width: 0;
  }
  
  .btn-icon:hover:after{
      max-width: inherit;
      transition: 2s ease;
  }
  </code></pre>
  
  <p>Fiddle: <a href="https://jsfiddle.net/xpvt214o/122123/" rel="nofollow noreferrer">https://jsfiddle.net/xpvt214o/122123/</a></p>