Firefox sets wrong caret position contentEditable with :before

There is a problem when you put the :after element to absolute. I can not figure out why. But if you just place it relative the problem is gone.

I’ve updated your fiddle: http://jsfiddle.net/NicoO/Lt3Wb/1/

Here is the new CSS (with some experimental additions)

$pad:10px;

div{ 
    padding:$pad; 
    border:1px solid #CCC;
    height:120px;
    position:relative; 

 &:before
 { 
     position:relative;
     color:#999;
     content:"Write a comment..."; 
 }   
}

div:focus
{
    border-color: red;
}

div:not(:empty):before{
    display: none;
}

The only problem that remains is, that you can focus behind the text of the :before element. That’ll be why you wanted it absolute. Interessting also: If you put the pseudo element to float: left; it shows the same behaviour as on position:absolute;.

Update

When you are forced to use absolute on peseudo elements, there seems to be only one solution at the moment. Define another padding for the box as long as it is empty and focused. Playground: http://jsfiddle.net/NicoO/Lt3Wb/5/

$pad:10px;
#test
{ 
    padding: $pad; 
    border:1px solid #CCC;
    height:120px;
    position:relative; 
    overflow: hidden;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;    

    &:empty:focus
    {
        padding: #{($pad*2)+6} $pad; 
    }

    &:before 
    { 
        position:absolute;
        color:#999;
        top: $pad;
        left: $pad;
        content: "Leave a comment"
    }   
}