CSS multi border

I don't know why this doesn't show a extra border can you see what I'm doing wrong?

.loginSubmit {
    width: 100px;
    height: 100px;
    background: #e0e0e0;
    border: 1px solid #dedede;
    color: #555555;
    font-weight: bold;
    text-shadow: white 0px 1px;

    /* firefox */
    backgro开发者_JAVA百科und: -moz-linear-gradient(top, #eaeaea, #f0f0f0 100%);
    -moz-border-radius: 5px;

    /* webkit */
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#eaeaea), to(#f0f0f0));
    -webkit-border-radius: 5px;
    position: relative;
}

.loginSubmit:before {
    width: 98px;
    height: 98px;
    content '';
    position: absolute;
    border: 1px solid black;
}

You forgot a colon in the .loginSubmit:before statement, which will make the rule invalid. So it won't render.

Make it like this:

.loginSubmit:before {
    width: 98px;
    height: 98px;
    content: ''; /* <-- extra colon here */
    position: absolute;
    border: 1px solid black;
}

This example is working in firefox:
http://jsfiddle.net/bxTv7/

Update:
Check this question: Can I use the :after pseudo-element on an input field?