title: How to do CSS ul li fade out the text?
body: <p>I want to create a vertical a menu, but menü text will appear on mouse hover. But text will appear left side of item.</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;span&gt;İtem-1&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span&gt;Long Name İtem-1&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span&gt;Very Long Name İtem-1&lt;/span&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and css is:</p>
  
  <pre><code>.container{
    margin: auto 50%;
  }
  ul{
      margin:0px;
      padding:0px;
      list-style-type:none;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;  
  }
   ul li{
      position:relative;
      background:#E01B6A; 
      width:40px;
      height:40px;
      margin-bottom:5px;
  }
  ul li span{
      display: none;
  }
  
  ul li:hover span{
       position: absolute;
       display:  inline-block;
       background:#fefefe;
  }
  </code></pre>
  
  <p>Text will appear in a square when Mouse hover.</p>
  
  <p><a href="https://jsfiddle.net/L6htypsb/" rel="nofollow noreferrer">TEST page</a></p>