Underlining text in submenu

Hi!

My question is about the header/upper menu.

I have managed to set the colour to dropdown/submenu as I preferred using this code:

.header-nav-folder-content {
    background: rgba(0,0,0,0.05) !important;
}

And I have been able to underline the title of the page or subpage that is currently being hovered over with this code:

nav a::after {

  border-bottom: 0.5px solid #000000;

  content: '';

  display: block;

  position: relative;

  width: 0%;

}

nav a:hover::after,

nav .current-menu-item a::after {

  width: 100%;

}

I would like to tweak the last code a bit, so that only where there is text, there will be a line under it. 

Now, even if there is just one word, the underline takes the full width of the textbox/of the dropdown menu.

See attached screenshot. I would like the line only to be under the action text: "praktische zaken" 

Thank you in advance!

Hey @Groei please provide Your site URL so we can check it.

2 hours ago, SquareRefresh said:

Hey @Groei please provide Your site URL so we can check it.

The website isn't public yet.. Any way you can provide code without the url?

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

15 hours ago, Groei said:

url is https://www.groei-praktijk.nl with password Degroeipraktijk

Add to Design > Custom CSS

/* underline width */
.header-nav-folder-item a {
    display: inline-block !important;
}

Thanks a ton! worked out!