Cursor appears above contenteditable div with placeholder and :before attribute

Question

<div contenteditable="true" id="sud"></div>

#sud
{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    position:relative;
}

#sud:empty:before
{
    display:inline;
    content:"hello";
    position:absolute; 
    top:0; left:0;
}

This works fine with all browsers, but with IE10, the cursor appears above the div. Can some one suggest solutions for this?

JSFiddle: http://jsfiddle.net/KX6BY/8/

Answer 1

DEMO

Disadvantage/Advantage of this solution: This solution will hide the text on focusing the element which is a disadvantage but its more or less a good thing as many peoples use javascript to hide placeholder text on input fields focus.

Details:

1) Content shouldn't be a part of css, hence i moved the content from :before to data-initial-content attribute in html.

2) .sud:empty:before placed the initial content inside before only if the div is empty & when users focuses the div i set :before to display:none; using this selector .sud:focus:before.

3) No need of position: absolute in this solution.

4) Also added overflow-y:auto & some padding for usability & visuals.