Удалить завершающий пробел, когда CSS псевдоэлемент :: после не в конце строки - PullRequest
Новая
       7

Удалить завершающий пробел, когда CSS псевдоэлемент :: после не в конце строки

2 голосов
/ 10 февраля 2020

Когда мой элемент ::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>

1 Ответ

0 голосов
/ 10 февраля 2020

это разрыв строки в 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>
...