Glitch in hover state when links are broken into multiple CSS columns

Question

When there is a list of links and you apply the 'column-count' CSS property to the container and you hover slightly below the last link in the first column (link 3 in the example) then the hover state will apply to the first link in the second column instead.

.two-column {
  column-count: 2;
  column-gap: 2.5rem;
  width: 200px;
}

a:hover {
  text-decoration: none;
}

<ul class="two-column">
                          
  <li>
    <a href="#">
      Link 1
    </a>
  </li>

  <li>
    <a href="#">
      Link 2
    </a>
  </li>

  <li>
    <a href="#">
      Link 3
    </a>
  </li>

  <li>
    <a href="#">
      Link 4
    </a>
  </li>

  <li>
    <a href="#">
      Link 5
    </a>
  </li>

</ul>

I have also made a pen of the issue here codepen.

Edit: You can see it happening in this GIF. Tested in Chrome 92 on macOS Big Sur, this doesn't seem to be a problem on Windows.

Answer 1

This worked in Chrome on macOS.

a:hover::after {
  content: ' ';
}

Answer 2

You have to increase the vertical gap between each list item. Here you can apply a line-height: 20px; to the li tag.

PS: Value is not specific.

Answer 3

I found that Windows users can see the issue when tabbing to focus on each link.
Seems like giving the anchor tags a display of inline-block actually makes it better. Hopefully this will solve the issue on macOS aswell.

.two-column {
  column-count: 2;
  column-gap: 2.5rem;
  width: 200px;
}

a {
 display: inline-block;
}

a:hover {
  text-decoration: none;
}

<ul class="two-column">
                          
  <li>
    <a href="#">
      Link 1
    </a>
  </li>

  <li>
    <a href="#">
      Link 2
    </a>
  </li>

  <li>
    <a href="#">
      Link 3
    </a>
  </li>

  <li>
    <a href="#">
      Link 4
    </a>
  </li>

  <li>
    <a href="#">
      Link 5
    </a>
  </li>

</ul>

Answer 4

Problem

The problem you have is the gap between your list-items. If items are in same column, then it is not a problem at all. But in your case, the next list-item lies in the second column.

My Understanding

You have created only columns without rows. The content in the column can be anything like text, image, link, etc. which is divided into two columns(in your case) by the browser. As, there are no rows then you cannot apply properties like row-gap which only works with the grids.

---

Solution

1. Change the existing structure by - either using CSS grid or flex.
2. With the existing structure - make a gap between list-items. Possibly by using either of the following CSS property on list items

• line-height
• margin
• padding

Answer 5

As a workaround for this bug, you can add a 1px tall element to cover the bottom of the column to prevent hover events:

.two-column {
  column-count: 2;
  column-gap: 2.5rem;
  width: 200px;
  position: relative;
}

/* Hack for Chrome column hover bug */
.two-column::after {
  content: '';
  height: 1px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

a:hover {
  text-decoration: none;
}

<ul class="two-column">
                          
  <li>
    <a href="#">
      Link 1
    </a>
  </li>

  <li>
    <a href="#">
      Link 2
    </a>
  </li>

  <li>
    <a href="#">
      Link 3
    </a>
  </li>

  <li>
    <a href="#">
      Link 4
    </a>
  </li>

  <li>
    <a href="#">
      Link 5
    </a>
  </li>

</ul>