超链接下划线，一招搞定

text-decoration属性：控制文本装饰线

你这么耐心看下去，肯定想知道如何去掉网页设计里的超链接下划线？告诉你个小技巧，只要用上这条 CSS rule——text-decoration就能搞定！它就像一个大管家，管理着文字线条的外观，下划线也包含其中。要让下划线消失得无影无踪，轻松如喝茶！只需把 text-decoration设置为none即可。例如，这样的代码一输入，所有超链接下方的讨厌下划线瞬间bye bye！

border-bottom属性：模拟下划线

a {
  text-decoration: none;
}

你有两个办法来搞定这根线。首先试试text-decoration，不过其实还有更快更省事的法子！那就是直接换成border-bottom。别忘了把上下两端设成none就行。例如这个示例，不但消除了所有超级链接下边的横杠，还加上了一个1像素宽度下边的小东西~

background-image属性：背景图片去下划线

a {
  text-decoration: none;
  border-bottom: 1px solid #000;
}

给你分享个超有用的技巧！一招搞定下划线困扰！只需把链接的背景换成小白点，动作完成后，下划线就神奇地不见了哟~而且你还可以玩转各种个性化的下划线特效，改变一下代码，不仅背景变没，还会出现一条超细的1像素蓝线哦：

:after选择器：玩转伪元素

嘿~告诉你个省时又好使的小技巧，用:after选择器给链接加点儿料！这样连颜色都能换了，比如给所有链接加个黑色一像素的短下划线

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 这个选择器才是真正的牛人！有了它，想要什么样的下划线都能实现，操作起来得根据具体情况而定咯～。

a {
  text-decoration: none;
  position: relative;
}
a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: black;
}