Как игнорировать увеличение родителя при font-weight: bold?

Рейтинг: 7Ответов: 1Опубликовано: 09.01.2015

Имею несколько li, у которых display: inline-block — это меню.

Дело в том, что активный пункты меню

  • добавляет border в 2px блоку li;
  • делает шрифт внутри li жирным.

Так вот, когда текст делается жирным, то увеличивается ширина li, тогда все соседние справа блоки начинают прыгать (когда пункты меню активного меняются!).

Как от этого избавиться (не увеличивать ширину li при увеличении внутри его текста)?

Обновление

<ul class="type">
    <li class="active"><a href="">Все</a>
    </li>
    <li><a href="">Обувь</a>
    </li>
    <li><a href="">Аксесуары</a>
    </li>
    <li><a href="">Детские магазины</a>
    </li>
    <li><a href="">Подарки</a>
    </li>
    <li><a href="">Прочее</a>
    </li>
</ul>

li
    display inline-block
    padding 7px 12px;   
    margin-right 15px //add
    &.active
        border 2px solid #fdb913 //МАГАЗИНЫ
        border-radius 20px

        a
            border none
            font-weight bold
            color #b6b2a1   
    a
        font-size 18px
        display inline-block
        color textBlue
        border-bottom 1px solid #c1ddf1
css html frontend вёрстка
Источник: Stack Overflow на русском

Ответы

▲ 4

ul {
  list-style-marker: none;
  padding: 0;
}

li {
  display: inline-block;
}

li + li {
  margin-left: 1em;
}

a {
  display: block;
  position: relative;
  text-align: center;
}

a:before, a:after {
  content: attr(aria-label);
  text-decoration: inherit;
}

a:before {
  font-weight: bold;
  visibility: hidden;
}

a:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

a:hover:before {
  visibility: visible;
}

a:hover:after {
  display: none;
}
<ul>
  <li>
    <a href="" aria-label="Все"></a>
  </li><li>
    <a href="" aria-label="Обувь"></a>
  </li><li>
    <a href="" aria-label="Аксесуары"></a>
  </li><li>
    <a href="" aria-label="Детские магазины"></a>
  </li><li>
    <a href="" aria-label="Подарки"></a>
  </li><li>
    <a href="" aria-label="Прочее"></a>
  </li>
</ul>