Where does that link:hover underline come from?

... but I finally found it!

In Joomla 4, there's a nice little animated underline that shows up when you hover over a menu link, and the active link is permanently underlined. But I couldn't see how that was done. What made it confusing, was that I could see this underline on some pages, but not on the home page.

And then I found this: Bootstrap navbar underline animation! It uses :after!
As with so many things CSS, it's so easy once you know how 😊.
I couldn't see it on the homepage because of it's color (or lack thereof, because of the opacity setting).

Here's how it works. The link:after has the following CSS:

@media (min-width: 768px)
.container-header .mod-menu>li:after {
    position: absolute;
    right: 50%;
    bottom: 0;
    left: 50%;
    display: block;
    height: 2px;
    margin: auto;
    content: "";
    background: transparent;
    opacity: .2;
    transition: all .2s ease,background-color .2s ease;
}

And when active or on hover, this CSS is called

.container-header .mod-menu>li.active:after, .container-header .mod-menu>li:hover:after {
    right: 2px;
    left: 0;
    background: red;
}

(Changing the background to red in the browser inspector is what finally made it visible on my homepage).

Right. Now lets add this to my user CSS, so I can tweak it a bit.