How to apply the underline-on-hover-effect to menu-item-text?

Try change this CSS:

li > a::after {
bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 0%;
  position: absolute;
  background: var(--accent);
  transition: width 0.2s ease 0s, left 0.1s ease 0s;
  width: 0;
}
li > a:hover::after, li > a.active-nav::after {
  width: 100%; 
  left: 0; 
}

to this:

.main-navigation li > a::after {
  bottom: 10px;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  background: var(--accent);
  transition: width 0.2s ease 0s, left 0.1s ease 0s;
  width: 0;
}
.main-navigation li > a:hover::after, .main-navigation li > a.active-nav::after {
    width: calc(100% - 40px);
    left: 50%;
    transform: translatex(-50%);
    bottom: 10px;
}

Thanks, Ying, but now 2 issues occur:

1. The underline is not going from left to right, instead it goes from center to left+right
2. The previous full-width underline effect applied to the menu-items still occurs

Hard to explain in words, so I recorded a brief screencast.

Can you please help me to fix this?

Thank you in advance and kind regards,
Sascha

Hum, then let's switch back to your original CSS, then add this CSS:

.main-navigation .main-nav ul li a {
    padding-left: 0;
    padding-right: 0;
    margin-left: 20px;
    margin-right: 20px;
    position: relative;
}

Thank you, looks good!

So now I'd like to have the active item underlined. How can I achieve this?

Use this selector for hover and current menu item:
.main-navigation .main-nav ul li > a:hover::after, .main-navigation .main-nav ul li[class*="current-menu-"] > a::after

I would suggest adding .main-navigation .main-nav ul before all the li > a::after selectors to make it more specific, otherwise, the effect will apply to list blocks in your content as well.

Thanks a lot, looks perfect now :)

Awesome :)

Hey there,

sorry for re-opening this ticket again.

The CSS is working well on this site (via Customizer), but not on that one (via Simple CSS).

How come?

Also: How to prevent the underline-effect to work on the last menu-item? Should work on all menu-items except for the last one ;-)

Thank you in advance and kind regards,
Sascha

It's working fine on the link you provided.

To remove the effect from the last menu item, change this selector
.main-navigation .main-nav ul li > a:hover::after, .main-navigation .main-nav ul li[class*="current-menu-"] > a::after

to:
.main-navigation .main-nav ul li:not(:last-child) > a:hover::after, .main-navigation .main-nav ul li[class*="current-menu-"]:not(:last-child) > a::after

Oh, you were right :)

I have placed the post, where the CSS is added to, below the "Blog" menu item, but it looks a bit awkward, as you can see on this screenshot (link to the post)

I'd like to prevent the underline-effect for active menu-items, which contain sub-menu-items, to expand to the full-item width. Instead, I'd like to have it underline only below the text of these items.

Is this possible, too?

By the way: Your support is phenomenal, thank you sooo much for your help 🙏

Thank you in advance and kind regards,
Sascha

You are welcome :)

Underline only add to the parent menu items?