The css-tricks version put in CodePen, doesn’t work (the width needs to come from the `a` elements, not the `li`). What it does is floating all the `a` elements, so the `li` elements don’t contain them anymore. All the `li` elements hug up with width and height zero, that’s why setting the magic line position to the `a` position works.
You however, are using inline-block on the `li` elements, making them to contain their floated `a` elements (because of block formatting context of inline-blocks).
@atelierbram I think it works in your Pen but not on @hal8‘s website because on his website he got `position: relative` on almost everything. Without `position: relative` and padding on the `li` elements it seems to work as well (put the padding on the `a` elements instead).