在DIV上添加带有jquery的伪类

Question

我定义了一个伪类/元素：

.editableDiv:empty:not(:focus)::before{
        content:attr(data-text);
        color: #CCC;
        font-style: italic;
        margin-left: 5px;        
    }

.editableDiv {
    -webkit-user-modify: read-write;
    -moz-user-modify: read-write;
    user-modify: read-write;    
}

有了这个，我在DIV元素上获得了类似占位符的功能。一切正常。但是，我正在动态添加我的DIV。通过动态更改DOM，不会应用这些规则。如何使用jQuery对动态添加的元素应用这些规则？是否可以在纯CSS中翻译这些规则（DIV上的占位符功能）？

修改

Link to code pen project where I have this problem

问题解决了：

Link to solved problem