Css 忽略宽度中的元素

我正在制作一个隐藏按钮信息的菜单。请看演示代码：

ul{
列表样式：无；
宽度：300px；
高度：300px；
边框：1px纯黑；
填充：10px；
}
李{
显示：内联块；
浮动：对；
明确：两者皆有；
边界半径：20px；
边框：1px纯黑；
填充：10px；
最小宽度：0%；
边缘底部：10px；
过渡：所有0.3秒缓解；
}
li>span{
颜色：灰色；
左边距：5px；
不透明度：0；
过渡：不透明度0.3s；
}
李：悬停{
最小宽度：100%；
}
李：悬停>跨距{
不透明度：1；
}
*{
框大小：边框框；
}

福巴
按钮更多信息

将span

字体大小设置为
0
，然后将其重新设置为悬停状态


ul{
列表样式：无；
宽度：300px；
高度：300px；
边框：1px纯黑；
填充：10px；
}
李{
显示：内联块；
浮动：对；
明确：两者皆有；
边界半径：20px；
边框：1px纯黑；
填充：10px；
最小宽度：0%；
边缘底部：10px；
过渡：所有0.3秒缓解；
}
li>span{
颜色：灰色；
左边距：5px；
不透明度：0；
字号：0；
过渡：所有0.3秒缓解；
}
李：悬停{
最小宽度：100%；
}
李：悬停>跨距{
不透明度：1；
字体大小：继承；
}
*{
框大小：边框框；
}

福巴
按钮更多信息
您可以将字体从0更改回原始大小。此外，将过渡更改为“全部”，而不仅仅是“不透明度”，这样字体大小也将设置动画，并且不会使动画起伏

CSS

li > span {
   font-size: 0;                /* <-- Change the font-size to 0 */ 
   transition: all 0.3s ease;   /* <-- Change to 'all' */ 
}

li:hover > span {
  font-size: 16px;              /* <-- Change font-size back */ 
}


福巴
按钮更多信息
您可以使用
位置：绝对
（以及一些其他调整）来防止
影响布局：


ul{
列表样式：无；
宽度：300px；
高度：300px；
边框：1px纯黑；
填充：10px；
}
李{
显示：内联块；
浮动：对；
明确：两者皆有；
边界半径：20px；
边框：1px纯黑；
填充：10px；
最小宽度：0%；
边缘底部：10px；
溢出：隐藏；
位置：相对位置；
过渡：所有0.3秒缓解；
}
li>span{
颜色：灰色；
左边距：5px；
不透明度：0；
位置：绝对位置；
空白：nowrap；
过渡：不透明度0.3s；
}
李：悬停{
最小宽度：100%；
}
李：悬停>跨距{
不透明度：1；
}
*{
框大小：边框框；
}

福巴
按钮更多信息
我不确定我是否理解您想要什么。您的意思是-？@SleekGeek在演示中，当按钮文本未悬停时，按钮文本旁边不应该有额外的空白。类似于将元素设置为“位置：绝对”时，宽度不包含在其父元素中。这类似于我的一次尝试，其中我将跨度设置为“显示：无”。工作正常，但动画不平滑。这是因为无法设置显示属性的动画。是的，我知道这一点。但是设置字体大小的动画也不会产生平滑的过渡。在我看来非常平滑，但是你可以硬编码悬停值。显然我是瞎子。这不在你的描述中，所以我认为你没有改变它。很好。这正是我一直在寻找的解决方案！特别是你把它做成了文本不换行的形式。谢谢你的提示，Paulie_D。我已经编辑了答案，将解决方案内联。