使字体加粗而不移动其余内容

Question

我基本上想让内容在点击元素并更改其字体时不移动。我做到了，但我也想在点击的元素旁边有一个徽章。据我所知，css技巧使字体变粗，而不移动其余内容，这需要display:block和display:inline块来处理。我希望徽章使用display:flex放在元素旁边，但它破坏了css技巧，再次使内容移动。有办法解决这个问题吗？

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

具有显示灵活性的代码段(使内容移动(

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

Answer 1

这个片段建立在给定代码中的思想之上-有一个伪元素，它也包含文本。

然而，它改变了周围的情况，使实际的item元素具有粗体，但首先以透明的颜色显示——这使得它即使在活动时也可以达到所需的宽度。

最初看到的文本位于before伪元素中，该元素具有法线权重，并位于其所属元素之上。

当激活时，颜色会反转，所以我们看到粗体，但大小一如既往。

对于徽章中的数字，只需要更改普通/粗体，因为徽章的大小已经固定。

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