如何删除锚点(链接)的下划线?

HTML CSS

DavaidTony宝儿

2020-03-23

无论如何(在CSS中)是否要避免在页面..中引入文本和链接的下划线?

第2804篇《如何删除锚点(链接)的下划线?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

14个回答
老丝 2020.03.23

我在网页打印中遇到了这个问题,并已解决。验证结果。

a {
    text-decoration: none !important;
}

有用!。

Gil 2020.03.23

下划线可以通过称为文本装饰的CSS属性删除。

<style>
a{
text-decoration:none;
}
</style>

如果要删除除a之外其他元素中存在的文本的下划线,则应使用以下语法。

<style>
element-name{
text-decoration:none;
}
</style>

还有许多其他文本修饰值可以帮助您设计链接。

猴子村村 2020.03.23

使用css属性,

text-decoration:none;

从链接中删除下划线。

宝儿小哥小卤蛋 2020.03.23

为问题提供另一种观点(从原始帖子的标题/内容推断出):

如果要跟踪在HTML中创建恶意下划线的原因,请使用调试工具。有很多选择:

对于Firefox,有FireBug;

对于Opera,有Dragonfly(在“工具”->“高级”菜单中称为“开发人员工具”;默认情况下是Opera附带的);

对于IE,有一个“ Internet Explorer Developer Toolbar”,它是IE7及以下版本的单独下载,并集成在IE8中(按F12键)。

我对Safari,Chrome和其他少数族裔浏览器一无所知,但无论如何,您可能至少应该在计算机上安装上述三种浏览器之一。

理查德村村小宇宙 2020.03.23

别忘了使用链接标签包含样式表

http://www.w3schools.com/TAGS/tag_link.asp

或将CSS封装在网页的样式标签中。

<style>
  a { text-decoration:none; }
  p { text-decoration:underline; }
</style>

我不建议在链接以外的任何地方使用下划线,下划线通常被认为是可点击的。如果无法点击,请不要在其下划线。

可以在w3schools学习CSS基础知识

阿飞 2020.03.23
<u>

是已弃用的标签。

采用...

<span class="underline">My text</span>

与包含...的CSS文件

span.underline
{
    text-decoration: underline;
}  

要不就...

<span style="text-decoration:underline">My Text</span>
2020.03.23

如果您只想将锚标记用作链接而没有添加样式(例如,悬停时的下划线或蓝色),则将其添加 class="no-style"到锚标记。然后在全局样式表中创建“ no-style”类。

.no-style { text-decoration: none !important; }

这有两个优点。

  1. 它不会影响所有锚标记,只会影响添加了“ no-style”类的锚标记。
  2. 它将覆盖可能会阻止将文本修饰设置为none的任何其他样式。
伽罗 2020.03.23

有时它将被一些渲染UI CSS覆盖。更好地使用:

a.className {
    text-decoration: none !important;
}
Itachi 2020.03.23

在我的情况下,锚定有一个悬停效果规则,例如:

#content a:hover{
border-bottom: 1px solid #333;
}

当然,text-decoration:none;在这种情况下无济于事。我花了很多时间直到找到答案。

因此:下划线不要与底线混淆。

西门 2020.03.23

使用CSS。这会删除au元素的下划线

a, u {
    text-decoration: none;
}

有时您需要覆盖元素的其他样式,在这种情况下,可以!important在规则上使用修饰符:

a {
    text-decoration: none !important;
}
Mandy逆天 2020.03.23

使用CSS删除text-decoration

a {
    text-decoration: none;
}
Gil伽罗小宇宙 2020.03.23

CSS是

text-decoration: none;

text-decoration: underline;
Gil达蒙 2020.03.23

这将删除您的颜色以及锚标签所在的下划线

 a {
     text-decoration: none ;
  }
a:hover
  {
    color:white;
    text-decoration:none;
    cursor:pointer;
   }
斯丁阳光 2020.03.23

如果您只想从锚链接中删除下划线,则是您的最佳选择-

    #content a{
                text-decoration-line:none;
                }

这将删除下划线。

此外,您也可以使用类似的语法来处理其他样式,

                text-decoration: none;
                text-decoration-color: blue;
                text-decoration-skip: spaces;
                text-decoration-style: dotted;

希望这可以帮助!

PS-这是我的第一个答案!

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android