How to remove underline line when hovering a pseudo element inside anchor tag?

Question

How can I add hover underline to the underline text inside div but not to the pseudo element no underline?

a {
  text-decoration: none;
}

div:before {
  content: "no underline";
  display: block;
}

div:hover {
  text-decoration: underline;
}

<a href="">
  <div>underline</div>
</a>

Answer 1

simply like below:

div:before {
  content: "no underline";
  display: inline-block;
  width:100%;
}

<a href="">
   <div>underline</div>
</a>

On hover:

div:before {
  content: "no underline";
  display: inline-block;
  width:100%;
}

a {
  text-decoration:none;
}

div:hover { /* OR a:hover */
  text-decoration:underline;
}

<a href="">
   <div>underline</div>
</a>

Related: How do I not underline an element in a link?

Answer 2

just add a span tag and then target the span on hover

a {
  text-decoration: none;
}

div:before {
  content: "no underline";
  display: block;
}

span:hover{
text-decoration: underline;}

<a href="">
   <div><span>underline</span></div>
</a>