Html 鼠标悬停之前为伪元素保留空间

我想将图像添加到每个

li

，但我只想在鼠标上方显示它。 然而，我希望避免“移动”效果，这是添加到DOM中的新元素（图像）的结果。我试图用

可见性：hidden

来修复它，因为这需要空间，但运气不佳

下面是一个简单的例子，正如您所看到的，当这些

li

悬停时，它们会向右移动

最简单的方法是什么

---

您可能希望将

：绝对定位在
伪元素之前，以防止其在显示时进入布局流，或者独立于
：将
不透明度
状态悬停为0，并在悬停时将
不透明度
设置为1

保留
：在布局外流程之前

ul > li:hover:before {
   /* all the other styles */
   position: absolute;
   left: 25px;
}

小提琴：

创建<代码>：在
之前，无论<代码>：悬停
状态

ul > li:before {
   /* all the other styles */
   display: inline-block;
   float: left;
   opacity: 0;
}

ul > li:hover:before {
   opacity: 1;
}

Fiddle:
只是出于兴趣：你选择了哪种变体？为什么？我将使用第一种变体，更少的代码：）关于第二种方法，我尝试了与可见性类似的方法：隐藏，但这不起作用。不透明度就可以了，太好了！