making font weight bold not moving rest of content

Question

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 class="list">
  <li class="item" title="First" >First <div class="badge">5</div></li>
  <li class="item"  title="Second" >Second <div  class="badge">5</div></li>
  <li  class="item" title="Third" >Third <div class="badge">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 class="list">
  <li class="item" title="First" >First <div class="badge">5</div></li>
  <li class="item"  title="Second" >Second <div  class="badge">5</div></li>
  <li  class="item" title="Third" >Third <div class="badge">5</div></li>
</ul>

I dont want to have hard coded width. Im making a reusable component which should adjust width to its content. The above code is just an example. — Adrian, Aug 06 '22 at 18:19
What is it that is moving that you don't want to move? All I'm seeing at the moment is the font becoming bold (so the word gets a bit wider) but it doesn't disturb anything else. — A Haworth, Aug 06 '22 at 18:56
I want to make badge be next to the element by using display: flex and it that case it makes content move by clicking on a link. Currently on the example above nothing moves because its display: inline-block and the badge is placed in the next line. Please read my question once again, i think its well explained. — Adrian, Aug 06 '22 at 19:40
Could you make the snippet show the problem - easier for us to debug. — A Haworth, Aug 06 '22 at 19:41
Does this answer your question? [CSS: bolding some text without changing its container's size](https://stackoverflow.com/questions/5687035/css-bolding-some-text-without-changing-its-containers-size) — nothingisnecessary, Aug 06 '22 at 19:54

A Haworth · Accepted Answer · 2022-08-06T21:00:03.127

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 class="list">
  <li class="item" title="First">First
    <div class="badge">5</div>
  </li>
  <li class="item" title="Second">Second
    <div class="badge">5</div>
  </li>
  <li class="item" title="Third">Third
    <div class="badge">5</div>
  </li>
</ul>

making font weight bold not moving rest of content

1 Answers1