在网页设计中，下划线是常用的用于给超链接添加样式的装饰线。然而，在某些情况下，我们可能需要将超链接的下划线去掉。在css中，有几种方法可以使超链接没有下划线。
- text-decoration属性
在css中，text-decoration属性可以用来控制文本的装饰线。通过设置text-decoration:none即可实现将超链接的下划线去掉。
例如，下面的代码可以将所有超链接的下划线去掉：
a {
text-decoration: none;
}- border-bottom属性
另一种方法是使用border-bottom属性来模拟下划线。通过设置border-bottom:none即可去掉下划线。
例如，下面的代码可以将所有超链接的下划线去掉，并用border-bottom属性添加一个1像素的下边框：
立即学习“前端免费学习笔记（深入）”；
a {
text-decoration: none;
border-bottom: 1px solid #000;
}- background-image属性
我们还可以使用background-image属性来去掉下划线。通过将超链接背景图片设置为一个空白的像素可以将下划线去掉。该方法还可以用于添加自定义的下划线。
例如，下面的代码可以将所有超链接的下划线去掉，并将下划线设置为1像素高、蓝色的线条：
a {
text-decoration: none;
background-image: url("data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=");
background-repeat: repeat-x;
background-position: bottom;
background-color: blue;
height: 1px;
}- :after选择器
最后，我们还可以使用:after选择器来添加下划线。该方法可以为超链接添加一个伪元素，并在该元素上添加样式，从而实现下划线的效果。
例如，下面的代码可以将所有超链接的下划线去掉，并使用:after选择器添加一个1像素高、黑色的下划线：
a {
text-decoration: none;
position: relative;
}
a:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: black;
}总结一下，通过设置text-decoration:none、border-bottom:none、background-image等方法，我们可以实现将超链接的下划线去掉或添加自定义的下划线。而使用:after选择器可以让我们更灵活地控制下划线的样式。在实际应用中，我们可以根据具体情况选择最适合的方法来去掉下划线。
