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

Question

当我的

::after

元素添加到行的中间而不是末尾时，会添加尾随空白。我尝试删除它。

通过将元素放入内联块中确实会删除空白，但高度也会改变，我想防止这种情况发生。

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>

Answer 2

我设法解决了这个问题（至少在视觉上）。因此，在我的解决方案中，前导和尾随空格仍然存在，但在视觉上并未显示。 因此不需要直接在

<li>

/

</li>

之间添加内容而无需换行：

<ul class="comma-list">
  <li>
    Item 1
  </li>
  <li>Item 2
  </li>
  <li>Item 3</li>
</ul>

CSS 代码将如下所示：

ul.comma-list {
  display: inline-flex;
  list-style: none;
  gap: 0.2em;
  flex-wrap: wrap;
}
ul.comma-list li {
  display: inline-flex;
}
ul.comma-list li:after {
  content: ", ";
}
ul.comma-list li:last-child:after {
  content: "";
}

所以基本上它将使用内联弹性盒删除所有空格和间隙。