html - 如何覆盖来自库的文本装饰下划线？

我使用的是一个提供下划线的库，如下所示。
我想覆盖它而不显示下划线。
我的尝试：
.remove {text-decoration: none !important;}

.un {
  display: inline-block;
}

.un:after {
  content: '';
  width: 0px;
  height: 1px;
  display: block;
  background: black;
  transition: 300ms;
}

.un:hover:after {
  width: 100%;
}

<span class="un remove">Underlined Text - Or to be underlined</span>

最佳答案

它实际上不是下划线-您需要删除:after

.un {
  display: inline-block;
}

.un:after {
  content: '';
  width: 0px;
  height: 1px;
  display: block;
  background: black;
  transition: 300ms;
}

.un:hover:after {
  width: 100%;
}

.un.remove:after {   /* hide after if it has remove */
   display:none;
}

<span class="un remove">Underlined Text - Or to be underlined</span>

关于html - 如何覆盖来自库的文本装饰下划线？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51881096/