making font weight bold not moving rest of content-CodePudding

I basically wanted to make content not moving while clicking on an element and changing its font weight. I achieved that but i also wanted to have some kind of a badge next to the clicked element. From what i understand the css trick which makes font weight bold not moving the rest of the content requires display: block and display: inline-block to play around with. I wanted the badge to be next to the element using display: flex but it destroys the css trick and again makes the content move. Is there a way to fix that?

.list{
  display: flex;
  gap: 2rem;
  list-style: none;
}

.item{
 display: inline-block;
  position: relative;
  cursor: pointer;
}

.item:after{
  display: block;
  content: attr(title);
  opacity: 0;
  visibility: hidden;
  font-weight: bold;
  height: 0;
}

.item:active{
  font-weight: bold;
 }
  
.badge {
  width: 20px;
  height: 20px;
  background: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

<ul >
  <li  title="First" >First <div >5</div></li>
  <li   title="Second" >Second <div  >5</div></li>
  <li   title="Third" >Third <div >5</div></li>
</ul>

Snippet with display flex (making content move)

.list{
  display: flex;
  gap: 2rem;
  list-style: none;
}

.item{
 display: flex;
 position: relative;
 cursor: pointer;
}

.item:after{
  display: block;
  content: attr(title);
  opacity: 0;
  visibility: hidden;
  font-weight: bold;
  height: 0;
}

.item:active{
  font-weight: bold;
 }
  
.badge {
  width: 20px;
  height: 20px;
  background: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

<ul >
  <li  title="First" >First <div >5</div></li>
  <li   title="Second" >Second <div  >5</div></li>
  <li   title="Third" >Third <div >5</div></li>
</ul>

CodePudding user response：

This snippet builds on the idea in the given code - have a pseudo element which also contains the text.

However, it changes things around so that the actual item element has bold but is first shown with color transparent - this makes it as wide as it needs to be even when active.

The text seen initially is in the before pseudo element which has weight normal and is positioned over its owning element.

When made active the colors are reversed so we see the bold, but the size is as it has always been.

For the number in the badge it's only necessary to change normal/bold as the badge's size is already fixed.

.list {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.item {
  display: flex;
  position: relative;
  cursor: pointer;
  font-weight: bold;
  color: transparent;
}

.item::before {
  display: block;
  content: attr(title);
  height: 0;
  color: black;
  z-index: 1;
  position: absolute;
  font-weight: normal;
}

.item:active {
  font-weight: bold;
  color: black;
}

.item:active::before {
  color: transparent;
}

.badge {
  width: 20px;
  height: 20px;
  background: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: black;
  font-weight: normal;
}

.item:active .badge {
  font-weight: bold;
}

<ul >
  <li  title="First">First
    <div >5</div>
  </li>
  <li  title="Second">Second
    <div >5</div>
  </li>
  <li  title="Third">Third
    <div >5</div>
  </li>
</ul>