CSS - Space after "|" when added with after [duplicate] - css

Question

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
I have a jsfiddle here - https://jsfiddle.net/3sph9wpg/5/
Super simple I have a list with display:inline; to create a horizontal nav
I want a bar between each element which I can add with after
My problem is I seem to have a space after the bar that I cant remove
I need to add a space inside the which I don't like doing
ul{
list-style: none;
li{
display: inline-block;
&:after{
content: "|";
}
}
}

Answer 1

This is not related to the ::after - it's because display: inline-block causes the white space between nodes (i.e. between one closing tag and the next opening tag) to be parsed as a single space.
There's several ways round this. Since the size of the added space is dictated by the inherited font size, one approach is to set a font size of 0 on the parent ul.
CSS:
ul { font-size: 0; }
Output:
one|two|three
No whitespace will now show between the nodes. However, this can cause problems of the LIs have a relative font size set in ems. Using pixels or rem's gets round this problem.
Fiddle.
Another approach is to use floats rather than inline-block, which doesn't suffer from this problem.
li { float: left; }
Fiddle.

Answer 2

This is a common issue when using display: inline-block and having an extra line in your code. To fix the extra space just use font-size:0; on the parent ul element. You will then need to reset the font size to the value of your choice in this li.
https://jsfiddle.net/8vhqyxxr/

Answer 3

It's the actual white space (line break in this case) between the li elements. It's because they are inline block elements.
If you remove the breaks, the spaces are gone:
https://jsfiddle.net/3sph9wpg/9/
There are other possibilities, like messing around with the font-size. A font-size 0 results in zero-width spaces, so you could set font-size: 0 on the ul. But unfortunately, there is no way to properly 'restore' the font size of the li relative to the ul's parent, so you will have to give the li elements an explicit font size, which can be ugly.
Another solution, also not pretty, is putting the whitespace inside the tags, so it is ignored, like so:
https://jsfiddle.net/3sph9wpg/10/
A similar problem is often found when you want to display multiple images (also inline-block elements) on a single line, and I'm sure that you can find numerous solutions for that problem that also apply to yours, but most, if not all of them, will be hacky-ish solutions like the ones mentioned above.

Answer 4

You can use css attribute letter-spacing on the ::after pseudo element itself to correct it like this:
ul {
li {
display: inline-block;
&:after {
content: "|";
letter-spacing: -3px;
}
}
}
Fiddle: https://jsfiddle.net/thepio/Lz8z11yw/1/
Browser support for letter-spacing: http://caniuse.com/#search=letter-spacing