Css 通过：hover:before添加内容会导致基本元素在鼠标悬停时消失

我正在尝试创建一个带有背景图像（精灵）的卡片平铺。在悬停时，我想用一种颜色交换背景图像并添加一些文本。我正试图将此文本（可以是1行、2行甚至3行）放置在瓷砖的正中心。为此，我将基本元素设置为display:table，将

:before

元素设置为

display:table单元格（但仅限于悬停）

我面临的问题是，当一个鼠标悬停在基本元素上并将其鼠标移出后，基本元素就会消失在Mac上的Chrome和Opera中！（在FF和Safari中工作良好。未在IE或Windows/Linux上的任何浏览器中测试）。这是我的代码和一把小提琴：

小提琴：


。图片{
外形：1px纯黑；
浮动：左；
利润率：0 10px 10px 0；
宽度：150px！重要；
高度：150px！重要；
背景：褐红色url（'http://www.placehold.it/150x150');
光标：指针；
显示：表格；
}  
.图片：悬停{
背景图像：无；
颜色：白色；
}
.图片：悬停：之前{
内容：“测试”；
文本转换：大写；
文本对齐：居中；
显示：表格单元格；
垂直对齐：中间对齐；
}
在Chrome mac中选中时，动态添加表格单元格元素会导致布局中断

我们可以做的一件事是，我们可以在默认情况下添加元素，并在悬停时更新其内容


这是在Chrome MAC中工作的finr。
嗯。。。是 啊在Chrome 39.0.2171.71 m中不会发生在我身上——也就是说，在你链接的小提琴中不会发生。我在37.0.2062.103中看到它。我会向Chrome报告的。您可以在
：悬停
上获得所需的功能，前提是初始状态在您的实际项目中不需要它。您在Zach上使用的Chrome版本是什么？我刚刚更新了Chrome，现在它可以正常工作了。当然，我最终重新复制了一些东西，所以我丢失了我最近使用的版本号。38.什么。歌剧还是不管用，太棒了。在出现问题的两种浏览器中都能完美工作。不知道我为什么不试试这个。完全有道理。谢谢：）
.picture:before {
  content: '';
  text-transform: uppercase;
  text-align: center;
  display: table-cell;
  vertical-align: middle; 
}

.picture:hover:before {
  content: 'Test';
}