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:
And here is the desired result:
Here is the relevant part of the CSS from the fiddle above that displays the image before the list:
/* white+transparent right pointing arrow */