当 CSS 伪元素 ::after 不在行尾时删除尾随空格

Question

当我的::after 元素添加到一行中间而不是行尾时，会添加一个尾随空格。我尝试删除它。

通过将元素放在 inline-block 中确实会删除空白，但随后高度也会更改，我想防止这种情况发生。

new Vue({
  el: '#app',
});

.test {
  
  position: relative;
  padding: 0px 3px;
  z-index: 100 !important;
}

.test::after {
  content: "";
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  background: var(--color);
  -ms-transform: skewX(-10deg); /* IE 9 */
  -webkit-transform: skewX(-10deg); /* Safari 3-8 */
  transform: skewX(-10deg);
  top: 0px;
  left: 0px;
}
p {
  font-size : 12px;
}

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app" style="font-size: 24px; padding: 10px">

#1 <span class="test" :style="'z-index: 100;--color:' + '#ff00ff' + ';'">
    test
  </span>
  <br>
  <br>
  <br>
#2 In a  <span class="test" :style="'z-index: 100;--color:' + '#ff00ff' + ';'">
    test
  </span> sentence.  





<p>
<br>
  <br>
In case #1 after element is at the end of the line and does not add a space.
<br>
<br>
<br>
In case #2 the element is in the middle of the line and add unwanted trailing space.
</p>
</div>

Answer 1

它是 HTML 中的换行符。当我删除文本和 </span> 之间的换行符时，它似乎可以工作

new Vue({
  el: '#app',
});

.test {
  position: relative;
  padding: 0px 3px;
  z-index: 100 !important;
}

.test::after {
  content: "";
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  background: var(--color);
  -ms-transform: skewX(-10deg);
  /* IE 9 */
  -webkit-transform: skewX(-10deg);
  /* Safari 3-8 */
  transform: skewX(-10deg);
  top: 0px;
  left: 0px;
}

p {
  font-size: 12px;
}

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app" style="font-size: 24px; padding: 10px">

  #1 <span class="test" :style="'z-index: 100;--color:' + '#ff00ff' + ';'">
    test
  </span>
  <br>
  <br>
  <br> #2 In a <span class="test" :style="'z-index: 100;--color:' + '#ff00ff' + ';'">test</span> sentence.





  <p>
    <br>
    <br> In case #1 after element is at the end of the line and does not add a space.
    <br>
    <br>
    <br> In case #2 the element is in the middle of the line and add unwanted trailing space.
  </p>
</div>