默认情况下，Web浏览器具有适用于特定HTML元素的某些CSS样式。如果您没有使用站点自己的样式表覆盖这些默认值，则默认值将适用。对于超链接，默认显示样式是任何链接的文本都是蓝色和下划线。浏览器执行此操作，以便网站的访问者可以轻松查看链接的文本。许多网页设计师不关心这些默认样式，尤其是那些下划线。值得庆幸的是，CSS可以很容易地改变那些下划线的外观或完全删除它们。
删除文本链接上的下划线
读取带下划线的文本可能更难以阅读非带下划线的文本。此外，许多设计师根本不关心带下划线的文本链接的外观。在这些情况下，您可能希望完全删除这些下划线。
要从文本链接中删除下划线，您将使用CSS属性text-decoration。以下是您要编写的CSS：
一个{text-decoration：none; }
使用这一行CSS，您将从所有文本链接中删除下划线。即使这是一种非常通用的样式（它使用元素选择器），它仍然具有比默认浏览器样式更多的特异性。因为这些默认样式是创建下划线的内容，所以您需要覆盖它。
关于删除下划线的注意事项
在视觉上，删除下划线可能正是您想要完成的，但是当您执行此操作时也应该谨慎。无论你是否喜欢下划线链接的外观，你都不能争辩说它们明确了哪些文本是链接的，哪些不是。如果你带走下划线或更改默认的蓝色链接颜色，你应该确保用仍然允许链接文本突出的样式替换它们。这将为您网站的访问者提供更直观的体验。
不要强调非链接
关于链接和下划线的另一个警告，不要强调不是链接的文本作为强调它的方式。人们已经开始期望带下划线的文本是一个链接，所以如果你强调内容以增加重点（而不是使其粗体或斜体），你发送错误的消息并将使网站用户感到困惑。
将下划线更改为圆点或破折号
如果您希望保持文本链接的下划线，但是从默认外观（即“soldi”行）更改该下划线的样式，您也可以这样做。您可以使用点来强调链接，而不是那条实线。为此，您仍将删除下划线，但您将使用border-bottom样式属性替换它：
一个{text-decoration：none; border-bottom：1px点缀; }
由于您删除了标准下划线，因此虚线下划线是唯一出现的下划线。
你可以做同样的事情来获得破折号。只需将border-bottom样式更改为dashed：
一个{text-decoration：none; border-bottom：1px虚线; }
更改下划线颜色
引起对链接注意的另一种方法是更改下划线的颜色。只需确保颜色适合您的配色方案。
一个{text-decoration：none; border-bottom：1px纯红色; }
双重下划线
使用双下划线的技巧是你必须改变边框的宽度。如果你创建一个1px宽的边框，你最终会得到一个看起来像一个下划线的双下划线。
一个{text-decoration：none; border-bottom：3px double; }
您还可以使用现有下划线与其他要素进行双下划线，例如其中一条线被点缀：
a {border-bottom：1px double; }
不要忘记链接状态
您可以将边框底部样式添加到不同状态的链接，例如：hover，：active或：visited。当您使用“悬停”伪类时，这可以为访问者创建一个很好的“翻转”样式体验。当您将鼠标悬停在链接上时，会显示第二个虚线下划线：
一个{text-decoration：none; } a：悬停{border-bottom：1px点缀; }
Jennifer Krynin的原创文章。 Jeremy Girard编辑
