Psuedo-classes upon psuedo-classes

Just for fun i decided to test adding psuedo classes to psuedo classes after the question came up in the #css chat room. Oddly, the order of the psuedo classes doesn’t seem to matter (at least in this case).

So… http://udlx.co/11. Yup, it works.

section {
width: 100px;
height: 100px;
background: rgba(186, 218, 85, .5);
border-radius: 50px;
position:fixed;
top: 30%;
left: 10%;
margin-left: -50px; 
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
}
section:hover {
margin-top: -5%
}
section:before {
content: "";
background: rgba(0,0,0,.1);
position: absolute;
top: 25%;
left: 25%;
right: 25%;
bottom: 25%;
}
section:hover:before {
content: "";
background: rgba(0,0,0,.2);
position: absolute;
top: 20%;
left: 20%;
right: 20%;
bottom: 20%;
}
section:after {
content: "";
background: rgba(0,0,0,.1);
position: absolute;
height: 140px;
width: 140px;
top:-20px;
left: -20px;
z-index: -1;
}
section:after:hover {
content: "";
background: rgba(0,0,0,.2);
-moz-transform: scale(1.5) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1.5) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1.5) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1.5) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1.5) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}