在可满足的Div上进行盒子尺寸，以隐藏首先和最后一个字符

Question

我有一个可满足的div，需要隐藏字符的第一个和最后一个字符。一层应覆盖字符#的顶部，并使其看起来像字符#，并且它下方的边界线甚至都不存在。

eg： <div contentEditable="true"># HI CONTENT! #</div> 是实际的HTML，但浏览器应仅显示HI CONTENT!。#字符应融合到两侧的背景中。因此，我尝试使用box-sizing: border-box，但这似乎增加了DIV的大小。

作为最终结果，我想在红色背景内看到#字符（在这种情况下，但需要是白色的父背景）。

div {
  display: inline-block;
  border-bottom-style: groove;
  box-sizing: border-box;
  border-right: 20px solid #f00;
  border-left: 20px solid #f00;
}

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

任何帮助将受到高度赞赏。谢谢。

Answer 1

您可以采用其他方法，并使用:before和:after选择器来达到所需的结果：

div {
  position: relative;
  display: inline-block;
  border-bottom-style: groove;
  box-sizing: border-box;
  /*border-right: 20px solid #f00;*/
  /*border-left: 20px solid #f00;*/
}
div:before {
  content: "";
  position: absolute;
  left: 0;
  width: 10px; /* adjust to your needs */
  height: 100%;
  background: #f00;
  opacity: .5; /* just to see its position */
}
div:after {
  content: "";
  position: absolute;
  right: 0;
  width: 10px;
  height: 100%;
  background: #f00;
  opacity: .5;
}

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

Answer 2

要解决您的问题，您可以使用::和::在具有白色背景的选择器之后，将其放在"＃"。

上方

另一个解决方案是添加类似的子跨度：

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

CSS：

[contentEditable=true] {
    overflow: hidden;
    white-space: nowrap;
}
[contentEditable=true] span {
    margin: 0 -11px;
}