Box sizing on a contentEditable DIV to hide first and last character

Question

I have a ContentEditable div that needs hiding of characters specifically the first and last character. A layer should overlay on top of the character# and make it look like the character# and the border line below it are not even present.

EG: <div contentEditable="true"># HI CONTENT! #</div> is the actual HTML but browser should only show HI CONTENT!. The # character should blend into the background on either side. So, far I tried using box-sizing: border-box but that seem to increase the size of the div on either size.

As a final result I would like to see # characters inside the red background(in this case, but needs to be the parent background which is white).

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>

Any help is highly appreciated. Thanks.

Answer 1

You can take a different approach and use the :before and :after selectors to achieve the desired result:

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>