How can I prevent other text from shifting on hover with CSS?-CodePudding

I have a category selector in my React app, and the category labels are displayed with flexbox so that they can be spaced evenly and horizontally. I've applied some styling changes to the hovered text to make the font weight heavier, but doing so has caused the labels surrounding the hovered one to shift. Is there a way I can fix this so that hovering doesnt cause anything to move, but instead just change the font weight?

Here's my CSS:

.skills-category-selector {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 12px;
}

.category-label {
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
}

.category-label:hover {
    font-weight: 800;
    text-decoration: underline;
}

CodePudding user response：

You can use text-shadow to increase text boldness instead

.skills-category-selector {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 12px;
}

.category-label {
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
}

.category-label:hover {
  text-shadow: 1px 0 0 black;
  text-decoration: underline;
}

<div >
  <span >Category 1</span>
  <span >Category 2</span>
  <span >Category 3</span>
</div>

CodePudding user response：

This solution can help you, you need to use pseudo-elements https://css-tricks.com/bold-on-hover-without-the-layout-shift/ or just assign a specific width on every .category-label

.skills-category-selector {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 12px;
}

.category-label{
  width: 20%;
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
}

.category-label:hover {
  font-weight: 800;
  text-decoration: underline;
}

   <div >
     <span >Category 1</span>
     <span >Category 2</span>
     <span >Category 3</span>
     <span >Category 3</span>
   </div>