How I can increase the font-size on hover without pushing other element css?-CodePudding

I am trying to style a grid element, I have tried to increase the font size of the a 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;
}

CodePudding user response：

You could try to set grid-template-columns: repeat(3, 1fr); and than

li{
    border: 3px solid red;
    padding: 20px;
    list-style-type: none;
    white-space:nowrap;
    font-size:1rem;
    transition: 0.5s ease-out font-size;
}
li:hover {
font-size:1.1rem;
}

CodePudding user response：

.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 >
      <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>

CodePudding user response：

Try this:

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

<ul >
  <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>