CODEWITHSUNDEEP
htmlcsspseudo-element
Bidoubiwa
Bidoubiwa

Reputation: 960

Remove trailing space when CSS pseudo-element ::after is not at the end of line

When my ::after element is added in the middle of a line and not at the end, a trailing white space is added. I try to remove it.

By putting the element in inline-block is does remove the white space but then the height is changed too and I would like to prevent this.

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>

Upvotes: 2

Views: 1289

Answers (2)

Danny Koppenhagen
Danny Koppenhagen

Reputation: 93

I managed to solve this (at least visually). So in my solution the leading and trailing space is still there but visually it's not shown. So no need of having the content directly between <li>/</li> without a newline:

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

The CSS code will look like this:

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: "";
}

So basically it will remove all spaces and a a gap using inline flexbox.

Upvotes: 0

Matan Sanbira
Matan Sanbira

Reputation: 1513

its the line break in the HTML. when I delete the line break after between the text and the </span> it seems to work

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>

Upvotes: 1

Related Questions