Html 在contentEditable DIV上调整方框大小以隐藏第一个和最后一个字符

我有一个ContentEditable div，需要隐藏字符，特别是第一个和最后一个字符。图层应覆盖在字符

#

的顶部，使其看起来像字符

#

且其下方的边框线甚至不存在

例如：

#你好#
是实际的HTML，但浏览器应仅显示
HI内容。
#
字符应混合到两侧的背景中。到目前为止，我尝试使用
box size:border-box
，但这似乎增加了两种大小上div的大小

最后，我希望看到红色背景中的
#
字符（在本例中，需要是白色的父背景）


div{
显示：内联块；
边框底部样式：凹槽；
框大小：边框框；
右边框：20px实心#f00；
左边框：20px实心#f00；
}
#你好#
要解决问题，可以使用带白色背景的：：before和：：after选择器将“#”置于上方

另一种解决方案是添加如下子跨度：

<div contentEditable="true"><span># HI CONTENT! #<span></div>

您可以采用不同的方法，使用
：before
和
：after
选择器来获得所需的结果：


div{
位置：相对位置；
显示：内联块；
边框底部样式：凹槽；
框大小：边框框；
/*右边框：20px实心#f00*/
/*左边框：20px实心#f00*/
}
部门：以前{
内容：“；
位置：绝对位置；
左：0；
宽度：10px；/*根据需要调整*/
身高：100%；
背景：#f00；
不透明度：.5；/*仅用于查看其位置*/
}
部门：之后{
内容：“；
位置：绝对位置；
右：0；
宽度：10px；
身高：100%；
背景：#f00；
不透明度：.5；
}
#你好#太棒了，正是我想要的。非常感谢。
[contentEditable=true] {
    overflow: hidden;
    white-space: nowrap;
}
[contentEditable=true] span {
    margin: 0 -11px;
}