Powiększanie tektu w css

Question

Witam. Chciałem zrobić proste menu na strone i zrobilem funkcje która po najechaniu na wybrana opcje w menu powieksza rozmiar jej czcionki. Problem w tym że powiększe mi przy tym calego diva. Czego użyc aby uniknac tego efektu?

Answer 1

spróbuj na hover zwiększać font-size i jednoczesnie zmniejszać padding dla tego elementu.

Comments

Po co zmniejszać padding jak można ustawić box-sizing?

---

też można, w css najczęściej  jest wiele dróg do rozwiązania problemu :) a ja osobiście bardzo rzadko korzystam z box-sizing więc dałem opcję z padingiem.

Answer 2

transform: scale();

<div class="container__font">
<div class="container__font--size">FONT SIZE</div>
</div>

.container__font{
width: 200px;
height: 50px;
border: 1px solid red;
line-height: 50px;
text-align: center;
overflow: hidden;
}
.container__font--size{
transition: .5s;
}
.container__font--size:hover{
cursor: pointer;
transform: scale(1.5);
background-color: red;
color: white;
}