CSS - Allow font to overlow with negative margin

Issue

I am creating a code editor using contenteditable and would like to add some syntax highlighting as a background color for all span element. I am using a negative margin to compensate for the border of the element (not shown in the following example, as it is irrelevant to the question). Here is the problem: Using a negative margin on an inline element clips the text at the end, like this:

I have tried cannot use the following, as it messes with my editor in some browsers:

• Pseudo elements
• position: absolute

Here is a code example of the text being clipped:

span{
  margin-left: -20px;
}


/* For visualization only */

* span:first-child{
  background-color: red;
}
* span:last-child{
  background-color: yellow;
}

<div>

<span>Hello world</span><span>Hello world</span>

</div>

If anyone knows how to achieve this without using the aforementioned techniques it would be greatly appreciated.

Edit: The following is an illustration of the desired outcome. This might look like an undesirable effect, but it does make sense in the context of my project.

Solution

I hope somebody will come up with something better

.item {
  transform: translateX(10px);
  display: inline-block;
}

.wrapper:first-child {
  background-color: red;
  box-shadow: 10px 0px 0px red;
  z-index: 10;
}

.wrapper:last-child {
  background-color: yellow;
  box-shadow: 10px 0px 0px yellow;
}

<div>
  <span class="wrapper">
  <span class="item">Hello world</span>
  </span>
  <span class="wrapper">
  <span class="item">Hello world</span>
  </span>
</div>

Answered By - Konrad Linkowski