title: How to avoid text jerk while scaling anchor in css transition?
body: <p>I am trying increase scaling of links items while hovering over them with the help of CSS3 transition and scale(). Everything goes well except one annoying issue - the text within anchor elements increases with an ugly jerk which ruins the beauty of this cool effect. If you run the below code, you will see weird text shaking issue while hovering over pagination link. How can we prevent it from happening so?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .pagination {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    text-align:center;
   }
   
   .pagination a {
    padding:8px 16px; 
    margin:0 4px;
    border:1px solid #ddd;
    text-decoration:none;
    color:#000000;
    display:inline-block;
    -webkit-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    transition:all 0.3s ease;
   }
   
   .pagination a:hover {
    background-color:#ddd;
    -webkit-transform:scale(1.5);
    -ms-transform:scale(1.5);
    -o-transform:scale(1.5);
    -moz-transform:scale(1.5);
    transform:scale(1.5);
   }
   
   .pagination span.current {
    padding:8px 16px; 
    margin:0 4px;
    border:1px solid #4CAF50;
    background-color:#4CAF50;
    color:#FFF;
   }
   
   .pagination span.disabled {
    padding:8px 16px; 
    margin:0 4px;
    border:1px solid #EEE;
    color:#DDD;
    /*display:none;*/ 
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="pagination"&gt;
      &lt;span class="disabled"&gt;&amp;laquo; Prev&lt;/span&gt;
      &lt;span class="current"&gt;1&lt;/span&gt;
      &lt;a href="#"&gt;2&lt;/a&gt;
      &lt;a href="#"&gt;3&lt;/a&gt;
      &lt;a href="#"&gt;4&lt;/a&gt;
      &lt;a href="#"&gt;5&lt;/a&gt;
      &lt;a href="#"&gt;6&lt;/a&gt;
      &lt;a href="#"&gt;7&lt;/a&gt;
      &lt;span&gt;...&lt;/span&gt;
      &lt;a href="#"&gt;19&lt;/a&gt;
      &lt;a href="#"&gt;20&lt;/a&gt;
      &lt;a class="next" href="#"&gt;Next &amp;raquo;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>