CSS written after pseudo-element not working

I'm working on Ruby-on-Rails 3.2.1. I've following DOM structure.

UPDATE: removed the </img> tag as mentioned by Gaby. Problem still persists.

<div class="frame">
         <img src='SOME_PATH' class="frame-image">
 </div>?
 

And following CSS

.frame { position:relative;border:1px solid #CCC;border-radius:2px;-moz-border-radius:2px; }
 .frame:before
 {
     position:absolute;
     content:'';
     border:2px solid #F2F2F2;
     height:100%;width:100%;
     box-sizing:border-box;
     -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;
 }
 img.frame-image     /* IT WON't BE APPLIED?! */
 {
     min-width:30px;min-height:30px;
     max-width:200px;max-height:200px;
 }?
 

The problem I'm facing is, CSS applied to img.frame-image is not working/not getting applied. I tried on Chrome 18 and FireFox 12. I don't see the style in Chrome's element inspector or in FireBug. It is also not getting overridden by any other CSS.

For demo I tried to create jsfiddle for this. It works there!

But surprisingly when I write img.frame-image CSS above .frame:before CSS, it works!!

.frame { position:relative;border:1px solid #CCC;border-radius:2px;-moz-border-radius:2px; }
 img.frame-image        /* NOW IT WILL BE APPLIED */
 {
     min-width:30px;min-height:30px;
     max-width:200px;max-height:200px;
 }?
 .frame:before
 {
     position:absolute;
     content:'';
     border:2px solid #F2F2F2;
     height:100%;width:100%;
     box-sizing:border-box;
     -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;
 }
 

Any idea why is it happening? is it framework (RoR) related issue or CSS semantics?

---