i have been fiddling around with this for a few hours now.

I have a vertical elementor nav menu and i want to apply a hover affect to it. So far so good, but i only seem to be able to select the whole column and apply the affect onto that, not only the length of the text.

Here is an example of how it currently looks, the closing "brakets" are always at the same width at the end of the column:

Example 1:

Example 2:

What i want it to be like is on the end of the text - which is differnet for each menu item.

Like This:

My current selector is .elementor-7 .elementor-element.elementor-element-1cf0e88 .elementor-nav-menu--main .elementor-item: - i tried with "a" as well which made it not work at all.

Thank you.

Max

CodePudding user response：

You can not select only text. The text must be inside a html tag.

For example:

div {
  color: green;
}

p {
  color: red;
}

span {
  color: blue;
}

<div>
  <p>I am selectable with p {  }</p>
  I am not selectable as I am a text element of root div tag.
  <span>Again I am selectable as I am wrapped with span tag.</span>
<div>

CodePudding user response：

A link to the site would be helpful.

But the problem here is probably, that the element you're targeting is "display: block" or similar, making is a full-width element.

Try setting the a-tag to "display: inline" or "display: inline-block", which will make the width fit the element - not the parent div.

Alternatively, you could target each link as "nth"-elements of a list, but I would need to see the actual page to determine that, as Elementor is rarely just "Elementor". Your theme and additional addons play a part here as well.