Почему то не срабатывает before и after в css вот пример тут http://jsfiddle.net/aUbVC/
.beforeAndAfter {
width:100px;
height:100px;
background:#ff9999;
margin:50px;
}
.beforeAndAfter::before {
content:"";
bottom:100%;
background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(100, 0, 0, 0) 80%);
}
.beforeAndAfter::after {
content:"";
top: 100%;
background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.beforeAndAfter:before, .beforeAndAfter:after {
pointer-events: none;
position: absolute;
content:'';
left: 0;
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-repeat: no-repeat;
height: 5px;
opacity: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: opacity;
transition-property: opacity;
}
<div class="beforeAndAfter"></div>