Multi-Column Focus Outline

by kwiliarty

HTML

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

SCSS

ul {
  columns: 2;
}

li {
  display: inline-block;
  padding: 10px;
  margin-bottom: 20px;
  width: 100%;
  
  &:focus,
  &.focus {
    outline: green auto 5px;
  }
}

JavaScript

let $li = $('li');
let liLength = $li.length;
let half = Math.floor(liLength / 2);
let $target = $li.eq(half);
$target.addClass('focus');