IMPORTANT NOTE: as of Sept. 2025 anchor positioning only works in Chromium browsers. There is a polyfill: https://github.com/oddbird/css-anchor-positioning, BUT IT DOES NOT WORK RELIABLY AT ALL, SO ANCHOR POSITIONING CANNOT BE USED YET. FIREFOX AND SAFARI SAY THEY WILL BE IMPLEMENTING SUPPORT IN FALL 2025
Due to the somewhat complicated nature of Kevin Powells original tutorial, I have broken my writen turotials in to 4 parts. This is the second. Subsequent tutorials note the changes in code from the preceeding tutorial
This tutorial is the same as the first one, EXCEPT:
a) we put anchor-name: --hovered-link; on the nav element as well. Now, when the nav li IS NOT being hovered on, the nav::after elment is positioned relative to the nav element and forms a line under the ENTIRE menu. But, when nav li:hover IS hovered on, the nav::after element is positioned relative to the nav:li, creating an underline on EACH menu item. One element many locations. Neat!
b) we use calc with left:(anchor-left) (right, and bottom) to move blue bar under entire menu off bottom and sides