'html link focus and hover states does not work properly with css column-count in chrome

When i use css column-count i get the following focus issue:

Part of the outline is shown in the previous column (see image)

enter image description here

code example:

ul {
  list-style: none;
  margin: 1rem;
  padding: 1rem;
  
  column-count: 3;
}

li {
  padding: 0 1rem 0 0;
}

a {
  text-decoration: none;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration: underline;
}
<ul>
<li><a href="#">dasdasdas sadasda asdasdas asdasda</a></li>
<li><a href="#">dasdasdas sadasda asda</a></li>
<li><a href="#">dasdasdas sadasda asdas asdasda sadasd</a></li>

<li><a href="#">dasdasdas sadasda asdasdas asdasda</a></li>
<li><a href="#">dasdasdas sadasda asda</a></li>
<li><a href="#">dasdasdas sadasda asdas asdasda sadasd</a></li>

<li><a href="#">dasdasdas sadasda asdasdas asdasda</a></li>
<li><a href="#">dasdasdas sadasda asda</a></li>
<li><a href="#">dasdasdas sadasda asdas asdasda sadasd</a></li>

</ul>

and an other issue is the hover state dont work properly because of css text-underline-offset in combinaton with column-count. hover state does not go away when you go to other link.

enter image description here

Any idee why and how to fix this issues? (these issues are only in chrome browser)

htmlcssgoogle-chrome


Solution 1:[1]

I solved this by adding padding to the top of each anchor element - in my case I had to add roughly 3px of padding, if that helps.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Chris

Related Questions