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

Question

当我的::after元素被添加到行的中间而不是结尾处时，将添加一个尾随空格。我试着去掉它。

通过将元素放在内联块中，is确实删除了空格，但随后高度也改变了，我想防止这种情况发生。

​

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>

​