CSS :before to add banner on list item

CSS :before to add banner on list item

I need to add a "coming soon" banner on one list item. The banner should
be absolute positioned in relation to the li, so that it appears to wrap
around the li.
I'm having issues:
getting the banner to be absolutely positioning in relation to the li
hiding the banner where the list item stops (so that visually it appears
to wrap around the content only). As it stands now its awkwardly extending
past the li. The site is responsive, so setting a fixed width and height
might not be the answer and it will not have the effect im looking for
where the image is clipped by the container.
I've created a fiddle here for review: http://jsfiddle.net/zQxSW/1/
<ul>
<li class="coming-soon"></li>
<li></li>
<li></li>
</ul>
ul{
list-style: none;
}
li{
width: 100px;
height: 100px;
margin: 10px;
background-color: #333;
display: inline-block;
border-radius: 5px;
}
.coming-soon:before{
width: 150px;
height: 35px;
line-height: 37px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
text-align: center;
position: absolute;
background: #e92629;
top: 24px;
left: -34px;
color: white;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
content: "coming soon";
overflow: hidden;
}
Thanks!