CSS多边框

Question

我不知道为什么这不显示额外的边框，你能看到我在做什么错了吗？

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

    /* firefox */ 
    background: -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; 
} 

Answer 1

你忘了在.loginSubmit:before声明一个冒号，这将使得该规则无效。所以它不会渲染。

让这样的：

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

这个例子是工作在Firefox：
http://jsfiddle.net/bxTv7/

更新：
检查这个问题：Can I use the :after pseudo-element on an input field?