Html :before :after 不处理输入类型提交？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24365580/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
:before :after not working on the input type submit?
提问by Mehar
why the :before and :after not working on the input type='submit'
为什么 :before 和 :after 不工作 input type='submit'
here is my code
这是我的代码
input.submit:before {
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 18px/1 'Genericons';
content: '\f400';
}
回答by Juan Mendes
It's because :beforeand :afteronly works for nodes that can have child nodes. In your case, using a button would work since it can take HTML.
这是因为:before并且:after仅适用于可以具有子节点的节点。在您的情况下，使用按钮会起作用，因为它可以采用 HTML。
5.12.3 The :before and :after pseudo-elements
The ':before' and ':after' pseudo-elements can be used to insert generated content before or after an element's content.
':before' 和 ':after' 伪元素可用于在元素内容之前或之后插入生成的内容。
Since input cannot have content, it does not support it
由于input不能有内容，所以不支持
回答by misterManSam
Use a <button>
用一个 <button>
HTML
HTML
<button>Submit</button>
CSS
CSS
button:before {
display: inline-block;
height: 20px;
background: #F00;
-webkit-font-smoothing: antialiased;
font: normal 18px/1 'Genericons';
content: '\f400';
}
回答by chriz
try this, in ur code u r targetting button with class submit, but u should target button with type submitlike below
试试这个，在你的代码中你的目标按钮与 class submit，但你应该目标按钮的类型submit如下
input[type="submit"]:before {
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 18px/1 'Genericons';
content: '\f400';
}
