Remove underline for a div inside a Link

Question

I have this structure:

<a href="" class="link">
 <div>
   <div class="innerdiv-with-underline">text with underline</div>
   <div class="innerdiv-without-underline">text</div>
 </div>
</a>

I would like that on :hover only the text inside innerdiv-without-underline would not be underlined.

I have tried this with no luck:

.link .innerdiv {
    text-decoration:none !important;
}

What can I do ?

make the element inline-block and add `width:100%` to keep it's behavior as block element if you want — Temani Afif, Dec 08 '19 at 11:04

Tân · Accepted Answer · 2019-12-08T10:19:34.890

3

You may want to use text-decoration property in the class .link instead of class .innerdiv

.link {
  text-decoration: none;
}

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

<a href="" class="link">
 <div>
   <div class="innerdiv-with-underline">text with underline</div>
   <div class="innerdiv-without-underline">text</div>
 </div>
</a>

edited Dec 08 '19 at 10:19

answered Dec 08 '19 at 10:09

Tân

1
15
56
102

thanks +1, i reformulated the question, because i need one div with underline and the second without – giò Dec 08 '19 at 10:16
ok thanks, i am trying to understand why your code deosn't work for me inside a boostrap4 page – giò Dec 08 '19 at 10:26
ok got it, in your first css i add to do this: .link, .link:hover {...} – giò Dec 08 '19 at 10:28

score 1 · Answer 2 · answered Dec 08 '19 at 10:10

1

Just remove innerdiv from .link .innerdivCSS, as achor tag has text-decoration css property assigned, not DIV

.link  {
  text-decoration:none;
}

answered Dec 08 '19 at 10:10

Sarvesh Mahajan

914
7
16

thanks +1, i reformulated the question, because i need one div with underline and the second without – giò Dec 08 '19 at 10:17

score 0 · Answer 3 · answered Dec 08 '19 at 10:47

Your css rule is this:

.link .innerdiv {
    text-decoration:none !important;
}

First of all there is no class named innerdiv. You might've meant innerdiv-without-underline. So probably you should have used this:

.link .innerdiv-with-underline {
    text-decoration: none;
}

Alas, this wouldn't work either. Since the underline is coming from the decoration of the <a> tag not <div> tag. So specifying a rule for only the div won't work. What you could have done is:

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

This will remove underlines from all the links. But now you want one to have underline on hover and another to not.

.link {
  text-decoration: none;
}

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

Remove underline for a div inside a Link

3 Answers3