Test fade on generated content

dabblet.css

/**
 * Test fade on generated content
 */


.fade {
   position:relative;
   }
 
.fade:after {
      opacity: 0.5;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
content: "";
display: block;
width:10px;
height:10px;
background-color:blue;
      }

   .fade:hover:after {
      opacity: 0;
      }

dabblet.html

<p class="fade">This is my text element that will fade when you hover over it.</p>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}