Remove underline on span in anchor tag

Question

I have an interesting problem I am trying to solve. I have an anchor element with some span text element inside

.link {
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

<a href="#" class="link">Hi <span class="inside-text">there</span> dude.</a>

What I'm trying to remove the underline on the span .inside-text and just underline the text outside the span on hover. I tried this

.text-inside {
  text-decoration: none !important;
}

but it doesn't seem to solve the problem

score 3 · Accepted Answer · answered May 02 '19 at 12:06

3

You need to add display:inline-block to span

.link {
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

.link:hover .inside-text{
  text-decoration: none;
  display:inline-block;
}

<a href="#" class="link">Hi <span class="inside-text">there</span> dude.</a>

answered May 02 '19 at 12:06

Hiren Vaghasiya

5,454
1
11
25

in fact is enough with inline-block – Daniel Abril May 03 '19 at 12:50
@DanielAbril Yes – Hiren Vaghasiya May 07 '19 at 03:54

Remove underline on span in anchor tag

1 Answers1