在pre元素中的制表符上设置背景颜色

Question

如何在不破坏tabstops的情况下获取制表符的背景颜色以覆盖包含pre元素的整行高度？

用于语法高亮代码。 我不想将标签转换为空格或使用javaScript。

https://jsfiddle.net/qftvv9dp/

pre.tab4 {
  tab-size: 4;
  font-size: 12pt;
  line-height: 18pt;
  background-color: #DDDDFF;
}

span.goodTabBadBack {
  background-color: green;
}

span.badTabGoodBack {
  background-color: blue;
  display: inline-block;
}

span.goodTabGoodBack {
  background-color: red;
  /* What to put? */
}

<pre class='tab4'>
0123456789abcdef
0   4<span class="goodTabBadBack">  </span>8    c
0   45<span class="goodTabBadBack"> </span>89   c
0   456<span class="goodTabBadBack">    </span>890  c
</pre>

<pre class='tab4'>
0123456789abcdef
0   4<span class="badTabGoodBack">  </span>8    c
0   45<span class="badTabGoodBack"> </span>89   c
0   456<span class="badTabGoodBack">    </span>890  c
</pre>

<pre class='tab4'>
0123456789abcdef
0   4<span class="goodTabGoodBack"> </span>8    c
0   45<span class="goodTabGoodBack">    </span>89   c
0   456<span class="goodTabGoodBack">   </span>890  c
</pre>