Как убрать смещение ссылок при увеличение жирности текста?

Question

[Fakt_37]

Всем привет, подскажи как сделать чтоб меню не прыгало. Уже всё перепробовал
https://jsfiddle.net/xsqf8g0h/

Comments

[Rustam Bainazarov]

Никак. Только text-shadow и т. п.

Answer 1

[Максим Морев]

А никак.
Если нужно делать при наведении текст жирным, чтобы он не менял свои размеры, то можно использовать хак при помощи text-shadow.
Пример сделать сейчас нет возможности, загуглите "text-shadow like bold" - там всё расскажут.

Answer 2

[Сергей delphinpro]

Answer 3

[twobomb]

Добавить что то типа

min-width:80px;
display:inline-block;

Comments

[Fakt_37]

в таком случае border при hover становится шириной 80px

Answer 4

[Fakt_37]

Нашел для себя идеальное решение, мало ли кому пригодится

.hero__nav__items {
    color: #111;
    font-weight: 300;
    font-size: 15px;
    line-height: 24px;
    margin: auto;
    padding: 2px 2px;
    outline: none;
        text-decoration: none;
}
.hero__nav__items:nth-child(1):hover {
  color: #ffd801;
  font-weight: 700;
  border-bottom: 1px solid #ffd801;
  padding: 0;
  padding-left: 2px;
  margin: auto;
}

.hero__nav__items:nth-child(3):hover {
  color: #ffd801;
  font-weight: 700;
  border-bottom: 1px solid #ffd801;
  padding: 0;
  padding-left: 1.5px;
  margin: auto;
}

.hero__nav__items:hover {
  color: #ffd801;
  font-weight: 700;
  border-bottom: 1px solid #ffd801;
  padding: 0;
  margin: auto;
}

Comments

[Fakt_37]

Moon Presence, я писал на телефоне) не так уж это и удобно, в проекте разумеется будет только нужное