title: Similating a link click without moving other links
body: <p>Whenever you click a link, I should get a "button press simulation" with <code>a:active</code>. What I fail to achieve is that when a link is clicked, it moves all other links and this is because on click, the font size is reduced. How to prevent all other link from moving when the font is increased or decreased on click?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="links"&gt;
    &lt;a&gt;Google&lt;/a&gt;
    &lt;a&gt;Yahoo&lt;/a&gt;
    &lt;a&gt;Facebook&lt;/a&gt;
    &lt;a&gt;IBM&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>SCSS:</strong></p>
  
  <pre><code>body {
    background: white;
    padding: 20px;
    font-family: Helvetica;
  }
  
  .links a {
    color: black;
    font-size: 16px;
    padding-right: 20px;
    text-decoration: none;
    cursor: pointer;
  
    &amp;:hover {
      color: red
    }
  }
  
  .links a:active {
    font-size: 15px;
    color: green
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/sylarruby/jz0tvk59/1/" rel="nofollow noreferrer">Click for fiddle</a>.</p>