JSFiddle - React, Tailwind, and code Playground

by tobek

HTML

regular contenteditable div, fine:
<div contenteditable></div>

contenteditable div with pseudo element, also fine:
<div contenteditable class="has-pseudo"></div>

inline-block contenteditable div with pseudo element, not fine:
<br>
<div contenteditable class="has-pseudo inline-block"></div>
    
<p>See <a href="https://bugs.webkit.org/show_bug.cgi?id=144350">https://bugs.webkit.org/show_bug.cgi?id=144350</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=904846">https://bugzilla.mozilla.org/show_bug.cgi?id=904846</a></p>

CSS

div {
    background-color: #EEE;
    margin: 10px;
    width: 400px;
    height: 50px;
}
.inline-block {
    display: inline-block;
}
.has-pseudo:empty:before {
    content: 'This is all dandy';
    color: #aaa;
}
.inline-block.has-pseudo:empty:before {
    content: 'Boy that caret is tall!';
}

JavaScript

document.querySelector('div.has-pseudo.inline-block').focus();