I recently encountered an issue with my list of items and their styling. Each list item contains an anchor element with a gray background, while the item itself has a gradient bottom border.
However, I noticed that in some cases, there was a white line appearing between certain items. After investigating, I discovered that this was due to the list item's background 'shining through' the anchor label. Why does this happen?
Interestingly, this issue seems to be prevented when the anchor text doesn't wrap, or when the bottom border has an even thickness (2px, 4px, etc).
Although I could simply hide the effect by setting the background color on the item itself, I'm more curious about why this phenomenon occurs rather than just how to solve it.
For a visual demonstration of this issue, you can check out this codesandbox link.