Аналогично щелчку ссылки без перемещения других ссылок

Question

Всякий раз, когда вы нажимаете на ссылку, я должен получить «симуляцию нажатия кнопки» с a:active.Чего мне не удалось добиться, так это того, что при нажатии на ссылку все другие ссылки перемещаются, и это происходит потому, что при нажатии размер шрифта уменьшается.Как предотвратить перемещение всех других ссылок при увеличении или уменьшении шрифта при нажатии?

HTML:

<div class="links">
  <a>Google</a>
  <a>Yahoo</a>
  <a>Facebook</a>
  <a>IBM</a>
</div>

SCSS:

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}

.links a {
  color: black;
  font-size: 16px;
  padding-right: 20px;
  text-decoration: none;
  cursor: pointer;

  &:hover {
    color: red
  }
}

.links a:active {
  font-size: 15px;
  color: green
}

Нажмите для скрипки .

Answer 1

Вы можете использовать JavaScript для достижения этой цели.

document.querySelectorAll('.links a').forEach(function iterateOverLinks(link) {
  // Count chars & multiply it with 12px (depends on the font family & font size)
  link.setAttribute("style", "min-width:" + (link.text.length * 12) + 'px'); 
});

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}

.links a {
  color: black;
  display: block;     /* Note    */
  float: left;        /* this    */
  text-align: center; /* changes */
  font-size: 16px;
  padding-right: 20px;
  text-decoration: none;
  cursor: pointer;
  
  &:hover {
    color: red
  }
}

.links a:active {
  font-size: 15px;
  color: green
}

<div class="links">
  <a href="#">Google</a> <!-- a-tags without href are invalid :P -->
  <a href="#">Yahoo</a>
  <a href="#">Facebook</a>
  <a href="#">IBM</a>
</div>

Answer 2

Это происходит потому, что когда вы изменяете размер шрифта, «окно» ссылки также уменьшается, в результате чего другие элементы вправо соответственно изменяют свое положение.

хотя бы определите ширину набора для тега <a>, используя:

.link a {
 display: inline-block;
 width: ##px;
}

Вы также можете использовать неупорядоченный список, поместить ссылки в элемент списка, а затем задать фиксированную / минимальную ширину для * 1007.*