How can I increase the font size on hover without pushing other elements?-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

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

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

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>