html - 将伪元素悬停在锚标记内时如何删除下划线？

Question

如何将悬停下划线添加到underlinediv 内的文本而不是伪元素no underline？

a {
  text-decoration: none;
}

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

div:hover {
  text-decoration: underline;
}

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

标签： htmlcss

Answer 1

就像下面这样：

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

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

悬停时：

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>

相关：如何不在链接中的元素下划线？