K48 K48 - 2 months ago 4x
CSS Question

Unwanted space before image in li::before

Fiddle: https://jsfiddle.net/n3xdk48x/3/

I am trying to style every

item so that there is a 6x10 arrow image before each

The 6x10 picture has a white background and the triangle/arrow itself is transparent.

Because I need these arrows to be of different colors, the idea is to set the background color of the ::before pseudo-element so that this color is visible through the transparent part of the image.

However, the resulting ::before pseudo-element turns out to be 20px high instead of 10px. There is some unwanted space (verically) before and after the image, where I can see the background-color of the pseudo-element.

How to remove that space on top and on bottom of the image?

Here is how it looks now:

enter image description here

And here is the desired result:

enter image description here

Here is the relevant part of the CSS from the fiddle above that displays the image before the list:

li:not(:first-child)::before {
display: inline-block;
width: 6px;
height: 10px;
background: #00b2b5;
vertical-align: middle;
/* white+transparent right pointing arrow */
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAKCAYAAACXDi8zAAAAW0lEQVQIW43PPQ5AQBBA4bdRKPRKV1C7hBM4j1Oo1eJ8kicrS8iSmGpmvmR+gpsDBRNQcosQc7UDFqA+7YCEDbACbawvSFgBM9A/IGHsjf9AzUep+fLXc78e3AE6bibzAA1JJgAAAABJRU5ErkJggg==


Try this: https://jsfiddle.net/benhull/n3xdk48x/6/

It needed...

font-size: 0;

Otherwise, the image was getting offset.

A better approach would be to use CSS triangles though: https://css-tricks.com/snippets/css/css-triangle/