CSS :before to add banner on list item

Question

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!

Answer 1

Fixed with

li {
    overflow: hidden;      /* "hiding the banner where the list item stops" */
    position: relative;    /* "getting the banner to be absolutely positioning
                               in relation to the li" */
}

jsFiddle Demo