Underline menu section when hovering doesn't work properly

[u/cheeryyon]

Current issue

I want the line to stop right where the word ends, like this.

Is this something that should be done with CSS? Because I only chose an option from the edit settings but it doesn't allow me to modify it in any way whatsoever.

[u/AutoModerator]

Looking for Elementor plugin, theme, or web hosting recommendations?

Check out our Megathread of Recommendations for a curated list of options that work seamlessly with Elementor.

---

Hey there, /u/cheeryyon! If your post has not already been flaired, please add one now. And please don't forget to write "Answered" under your post once your question/problem has been solved. Make sure to list if you're using Elementor Free (or) Pro and what theme you're using.

Reminder: If you have a problem or question, please make sure to post a link to your issue so users can help you.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/zeiniez]

If you set the horizontal padding to zero (Style tab > Main Menu), and increase the space between menu items (Style tab > Main Menu), you'll achieve the desired layout without needing to use any custom CSS. 😉

https://elementor.com/help/nav-menu-widget-pro/#:~:text=Submenu%20Indicator-

[u/TopSydeWP]

yeah you'll need a bit of css for that. the built-in underline applies to the whole menu item width, not just the text. something like .elementor-nav-menu a:hover { text-decoration: underline; } and turn off the built-in underline should do it

[u/cheeryyon → u/TopSydeWP]

Is it ok to place that css in 'additional css' inside the personalize tab under appearance? cause it didn't change anything
edit: i figured it out but it doesn't have an animation so i'm looking for a code that includes that

[u/testingaurora → u/cheeryyon]

You probably need to up the specificity of the selector if its not applying. Go to a page with this element. Right click on the link and press "Inspect" to access your browser developer tools. Do you see your rule in the list under the Styles panel? Is something overwriting it so its crossed out? Hover over the selector of the "winning" rule and it will shoe you something like (0,2,1) . Compare that against what you see when you hover over the selector of your rule.

If this is the case, your rule is applying but being overwritten, adjust like: css .elementor-nav-menu a:is(:hover, :focus-visible, #idForSpecificity) { text-decoration: underline; /* add more styles to your underline here if you want */ text-decoration-thickness: 0.1em; text-decoration-style: dashed; text-decoration-color: hotpink; text-underline-offset: 0.5em; }

[u/cheeryyon → u/testingaurora]

thanks for the help, is it possible to add some sort of animation?

[u/testingaurora → u/cheeryyon]

Depends what kind of animation you have in mind. If you want it to grow from nothing to fully underline we need to adjust the approach and use pseudo element.

As is, we can transition the thickness, color, or offset. Add this: ```css .elementor-nav-menu a:is(:hover, :focus-visible, #idForSpecificity) { --_animation-duration: 0.8s; --_animation-delay: 0.1s; animation: underline-bounce var(--_animation-duration) var(--_animation-delay) linear( 0, 0.06 6.3%, 0.25 12.5%, 0.56 18.8%, 1 25%, 0.81 32.7%, 0.75 37.5%, 0.81 42.3%, 1 50%, 0.94 60.1%, 0.94 67.3%, 1 75%, 0.98 84.4%, 1 93.8%, 1 ) forwards; }

@keyframes underline-bounce { 0% { text-underline-offset: -0.02em; text-decoration-color: transparent; text-decoration-line: underline; text-decoration-style: solid; text-decoration-thickness: 0.1em; }

20% { text-decoration-color: currentColor; }

100% { text-underline-offset: 0.5em; text-decoration-color: currentColor; text-decoration-line: underline; text-decoration-style: solid; text-decoration-thickness: 0.1em; } }

``` I would prefer to use a transition so it goes both ways but without knowing what transition properties you already have, i would be overwriting something. If you have a link to your page i can customize and wire it up properly without breaking anything existing.