list-style-type: none;
overflow: hidden;
color: gray;
}
.sidebar .PopularPosts .widget-content ul{
margin:0;padding:5px 0;list-style-type:none;}
.sidebar .PopularPosts .widget-content ul li{
position:relative;margin:5px 0;border:0;padding:10px;opacity:0.8;
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-o-transition:all 0.4s;}
.sidebar .PopularPosts .widget-content ul li:hover {
border-radius:30px 0px 0px 0px;margin-left:10px;opacity:1.0}
.sidebar .PopularPosts .widget-content ul li:first-child {background:red;width:90%}
.sidebar .PopularPosts .widget-content ul li:first-child:after{content:"1"}
.sidebar .PopularPosts .widget-content ul li:first-child + li{background:orange;width:80%}
.sidebar .PopularPosts .widget-content ul li:first-child + li:after{content:"2"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li{background:yellow;width:70%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after{content:"3"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li{background:green;width:60%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"4"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li{background:blue;width:40%;padding-right:20px;}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"5"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:indigo;width:30%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after{content:"6"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:violet;width:20%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{content:"7"}
.sidebar .PopularPosts .widget-content ul li:first-child:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{position:absolute;
top:15px;
right:-5px;border-radius:9%;background:#353535;
width:30px;height:40px;line-height:1em;text-align:center;
font-size:22px;color:#fff;}
.sidebar .PopularPosts .widget-content ul li .item-thumbnail{
float:left;border:0;
margin-right:10px;
background:transparent;
padding:0;width:30px;height:90px}
.sidebar .PopularPosts .widget-content ul li a{
font-size:12px;
font-weight:bold;
color:white;text-decoration:none;
text-shadow:0px 0px 6px white;
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-o-transition:all 0.4s;
}
.sidebar .PopularPosts .widget-content ul li a:hover{
color:black;text-decoration:none;text-shadow:1px 1px 1px white;}
<----trickstoo rainbow colored popular posts widget ends---->