title: Adding content via :hover:before causes base element to disappear on mouse out
body: <p>I'm trying to create a card tile with a background image (sprites). On hover, I would like to swap the background image with a color and add some text. I'm trying to position this text (which can be 1, 2 or even 3 lines) in the very center of the tile. To do this, I'm setting the base element to display: table and the <code>:before</code> element to <code>display: table-cell</code> (but only on hover).</p>
  
  <p>The problem that I'm facing is, after one has hovered the base element and moused out, the base element disappears in Chrome and Opera on a Mac! (Works fine in FF and Safari. Untested in IE or any of these browsers on Windows/Linux). Here's my code and a fiddle: </p>
  
  <p>Fiddle:
  <a href="http://jsfiddle.net/stacigh/0vf47vy5/" rel="nofollow noreferrer">http://jsfiddle.net/stacigh/0vf47vy5/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.picture {
      outline: 1px solid black;
      float: left;
      margin: 0 10px 10px 0;
      width: 150px !important;
      height: 150px !important;
      background: maroon  url('http://www.placehold.it/150x150');
      cursor: pointer;
      display: table;
  }  
  .picture:hover {
      background-image: none;
      color: white;
  }
  .picture:hover:before {
      content: 'Test';
      text-transform: uppercase;
      text-align: center;
          
      display: table-cell;
      vertical-align: middle; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="picture"&gt;&lt;/div&gt;
  &lt;div class="picture"&gt;&lt;/div&gt;
  &lt;div class="picture"&gt;&lt;/div&gt;
  &lt;div class="picture"&gt;&lt;/div&gt;
  &lt;div class="picture"&gt;&lt;/div&gt;
  &lt;div class="picture"&gt;&lt;/div&gt;
  &lt;div class="picture"&gt;&lt;/div&gt;
  &lt;div class="picture"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Edit:
  Here's a gif with the behavior
  <img src="https://i.stack.imgur.com/UYyty.gif" alt="Quirky behavior with :hover:before pseudo elements"></p>