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 third. Subsequent tutorials note the changes in code from the preceeding tutorial
This tutorial is the same as the second one, EXCEPT:
a) We remove the height on the nav:after so that we aren't contrained to just using a line all the time (i.e. when we hover on a menu item we want it's background to be filled with the steelblue color.)
b) We add a "top: calc(anchor(bottom) -10px);" anchor positioning attribute to nav:after, which anchors the TOP of the nav:after to the BOTTOM of the nav element, minus 10px, to accout for the height removal above. bottom and top now controls the thickness and vertidal position of the line under the entire menu.
c) Add nav:has(a:hover)::after says "if the nav links are being hovered on", change the computed position values of nav::after. (li and a must be same size for this to work properly)
d) So pseudo element (nav::after) doesn't get in the way., add z-index: -1 to nav::after. This makes pseudo elment go behind the nav element (and you can't fully see it). So we must add "isolation: isolate;" to the nav element (NOT the nav::after element). Not sure exactly how this works, but seems to make the nav::after element appear in front of the nav element, but behind the nav a text.
e) Add @supports (corner-shape: squircle) { /*progressive enhancement, creates neater shape difference on shape on nav::after when user hovers on tag. Older browsers will ignore and resort to just border-radius of 8px*/ border-radius: 50%; corner-shape: squircle; } to nav:has(a:hover)::after that we put in on step c)
add : /*BEGIN change border radius on first and last menu items so they look better with border raius on nav element--optional*/ nav:has(li:first-of-type a:hover)::before, nav:has(li:first-of-type a:hover)::after { @supports (corner-shape: squircle) { border-radius: 32px 50% 50% 32px; } } nav:has(li:last-of-type a:hover)::before, nav:has(li:last-of-type a:hover)::after { @supports (corner-shape: squircle) { border-radius: 50% 32px 32px 50%; } } /*END change border radius on first and last menu items so they look better with border raius on nav element--optional*/