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

Question

我使用的库提供下面的下划线.我想覆盖它而不显示下划线.

我的尝试:

.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>

Answer 1

它实际上不是下划线 - 你需要删除 :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>