如何覆盖来自库的文本装饰下划线？
如何覆盖来自库的文本装饰下划线？
提问于 2018-08-16 23:57:44
我正在使用一个库，它提供了如下所示的下划线。我想覆盖它并且不显示下划线。
我的尝试是：
.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>
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-08-17 00:02:19
它实际上不是一个下划线-您需要删除: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>
Stack Overflow用户
发布于 2018-08-17 00:03:36
你只需要删除伪元素中的内容
.un {
display: inline-block;
}
.un:after {
content: '';
width: 0px;
height: 1px;
display: block;
background: black;
transition: 300ms;
}
.un:hover:after {
width: 100%;
}
.remove:after {
content: none;
}<span class="un remove">Underlined Text - Or to be underlined</span>
Stack Overflow用户
发布于 2018-08-17 00:04:18
你为什么要重置text-decoration？该库不使用text-decoration%s来实现下划线效果。您需要重置库实际更改的内容，比如.un类的:hover状态的::after伪元素的width：
.remove:hover::after{
width: 0 !important;
}其他可能包括在.remove::after上设置content: none !important;或display: none !important;。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51881096
复制相关文章
相似问题
腾讯云开发者
