Issue

This Content is from Stack Overflow. Question asked by Yusuf

I am trying to stile a grid element, I have tried to increase the font size of the tag to 10% more than the actual size on hover, however, it does what is expected but it pushes the other elements( kind of shaking the other boxes).
How can I increase the font size on hover without affecting the other elements on the dom, I have tried overFlow: hidden but didn’t work!
Please note that I don’t want to use the font-weight property

HTML

    <ul className="links">
      <li><a href='csc'>1</a></li>
      <li><a href='csc'>2</a></li>
      <li><a href='csc'>3</a></li>
      <li><a href='csc'>4</a></li>
      <li><a href='csc'>5</a></li>
      <li><a href='csc'>6</a></li>
    </ul>

CSS

.links {
  display:grid;
  grid-template-columns: repeat(3,minmax(0, 1fr));
  gap: 1rem;
  padding: 0px 20px;
  overflow: hidden;
}
li{
    border: 3px solid red;
    padding: 20px;
    list-style-type: none;
    white-space:nowrap;
    font-size:1rem
}
li:hover {
font-size:1.1rem;
}

[![enter image description here][1]][1]

Solution

.links {
  display:grid;
  grid-template-columns: repeat(3,minmax(0, 1fr));
  gap: 1rem;
  padding: 0px 20px;
  overflow: hidden;
}
li{
    border: 3px solid red;
    padding: 20px;
    list-style-type: none;
    white-space:nowrap;
    font-size:1rem;

}
li a:hover {
font-size:1.1rem;
    line-height: 1.1rem;
    display:block;
}

<ul class="links">
      <li><a href='csc'>1</a></li>
      <li><a href='csc'>2</a></li>
      <li><a href='csc'>3</a></li>
      <li><a href='csc'>4</a></li>
      <li><a href='csc'>5</a></li>
      <li><a href='csc'>6</a></li>
    </ul>

This Question was asked in StackOverflow by Yusuf and Answered by Azu It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.