:before :after not working on the input type submit? [duplicate]

Question

why the :before and :after not working on the input type='submit'

here is my code

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

Answer 1

It's because :before and :after only works for nodes that can have child nodes. In your case, using a button would work since it can take 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.

Since input cannot have content, it does not support it

Answer 2

Use a <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';
}