Anchor text span when hovered

<a href="#" class="class">
  <span>One</span>
  <span>Two</span>
</a>

I wanted to target CSS of anchor text child, when it is hovered. I tried this:

.class:hover span {
  margin-right: 40px;
}

It didn’t work, It seems I have not chosen the correct selector.

Yes it does.:slight_smile:

The second span will get pushed to the right by 40px when the anchor is hovered.

If it doesn’t work for you then post a codepen please :slight_smile:

1 Like

Sir, I have a codepen here:

I was anticipating a result like this, where the two-element should depart on hover as if they are divorcing and separating from each other in opposite direction

Deletable

I was approaching margin property, I tried but it didn’t worked.

That’s not the same as you mentioned but will still work.

1 Like

Were you trying to do something like this?

It’s not clear whether you wanted the arrow to move or the element to expand?

The problem with flex is that if you expand one item then you expand all items when in the stretch algorithm. Therefore you probably have to magic number the elements a little but then you also have to decide what happens when text wraps etc.

It’s not quite clear which effect you want and how you want text to behave at different widths.

1 Like

Sir, I did it like this:

Now on hover text and arrow are moving in opposite directions.

You have a midas touch, there may be elegant ways to do this.

As you have an empty alt on the image then it should be a background and then you can tidy up the html and get rid of the span also for much cleaner html.

<a href="" class="just">Book 1:1 Coaching Call</a>

Note that the display is done in CSS so don’t write it in all caps as that can be done with text-transform:uppercase in CSS.

Then you can get rid of all the extra css and do it like this.

2 Likes

Thanks, Sir, on a different post I was advised to do it through an unordered list when there are many list items, but what I know is that:

<li><a href=""></a></li> that anchor text inside a li will be illegal. So think unordered list wont be a good method?

An anchor inside a list <li> element is fine. You can have anything you like inside a li tag just as you can inside a div.

Generally navs and menus are put into list structures as semantically they are a list of options but you can use bare anchors inside a nav element if needs must (as in the demo I gave at first).

(Old article but still relevant)

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.