Pseudo element takes up space in IE9 <p>I have a div that I want to behave like an text input field.</p> <p>Here's the full source code example:</p> <p>HTML:</p> <pre><code>&lt;div contenteditable='true'&gt;&lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>div:empty:before { content: 'Type here...'; color: #ccc; } div{ padding: 4px; border: 1px solid #ccc; } </code></pre> <p>See the <a href="http://jsfiddle.net/87m23r5q/2/" rel="nofollow">fiddle</a> in IE9.</p> <p>In IE9, the problem is that the keyboard caret is displayed at the end.</p> <p>In Chrome, the caret is at the beginning, which is correct.</p> <p>It seems like the problem is that the pseudo :before element is taking up space in IE9. How can I make it take up no space like it does it Chrome (behave like a placeholder)? </p>