:before :after 不处理输入类型提交？ [复制]

Question

为什么 :before 和 :after 不能处理 input type='submit'

这是我的代码

input.submit:before {     
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 18px/1 'Genericons';
    content: '\f400';
}

Answer 1

这是因为:before 和:after 仅适用于可以有子节点的节点。在您的情况下，使用按钮会起作用，因为它可以采用 HTML。

---

5.12.3 The :before and :after pseudo-elements

':before' 和 ':after' 伪元素可用于在元素内容之前或之后插入生成的内容。

由于输入不能有内容，所以不支持

Answer 2

试试这个，在你的代码中你的目标按钮是submit，但是你应该像下面这样使用submit类型的按钮

 input[type="submit"]:before {
         display: inline-block;
         -webkit-font-smoothing: antialiased;
         font: normal 18px/1 'Genericons';
         content: '\f400'; 
    }

Answer 3

使用<button>

Have a fiddle!

HTML

<button>Submit</button>

CSS

button:before {    
display: inline-block;
    height: 20px; 
    background: #F00;
     -webkit-font-smoothing: antialiased;
     font: normal 18px/1 'Genericons';
    content: '\f400';
}