Reputation: 960
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
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
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