网站链接添加动态下划线效果

动态下划线效果是之前在有的主题上看到的（好像hexo之类的静态站点喜欢做这些东西？），当时看到的时候觉得：“waかこいい”。正好最近翻新 srv，就把这个想法在 srv 和本站实现了一遍。

效果：

鼠标悬停时下划线从中间展开，点击时下划线抬高。

代码：

a, a:link, a:visited {
	position:relative;
	color: #7db9de;
	text-decoration:none;
} a::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 2px;
	background: #7db9de;
	transform: scale(0);
	transition: all 0.3s;
} a:hover::before {
	transform: scale(1);
} a:active::before {
	height: 5px;
	bottom: 1px;
}

div a {
	color: #fff;
} div a::before {
	display: none;
}

代码解释

首先看<a>标签的代码：

a, a:link, a:visited {
	position:relative;
	color: #7db9de;
	text-decoration:none;
}

text-decoration:none;一句关闭了链接标签的默认，因为原生的下划线肯定没有办法做特效，所以要自己写下划线，就要把原生下划线关闭。

position:relative;定义了一个位置信息，为下面的元素做参照物用。

a::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 2px;
	background: #7db9de;
	transform: scale(0);
	transition: all 0.3s;
}

在这里就是定义了下划线本身了。

::before是 css 的伪元素选择器。::before伪元素所控制的元素的位置在元素的前方。在这里，我们使用把这个元素作为下划线来定义。

content: "";为“下划线”文本内容，因为是下划线，所以肯定没有内容，留空。

而下面的三句就是定义下划线的位置的属性。

position: absolute;指明了这个“下划线”以其“父元素”位置为基准。

left: 0; bottom: -2px;指明了下划线左边与其“父元素”左边对齐，底部距离父元素 -2px，即往下偏移 2px。

下面的就是这个下划线的样式属性

width: 100%;下划线的宽度，其基准物为主体元素本身，也就是<a>标签的宽度。height: 2px;下划线的高，这里一般根据字体大小来确定。background: #7db9de;为下划线的颜色，因为这个“下划线”实际上就是一个像是<div>一样的元素，所以用 background 定义颜色。

再往下就是动画效果。

transition: all 0.3s;定义了动画的速度，即从动画开始到结束的用时。

transform: scale(0);将下划线变形为 0% 的大小，因为鼠标不悬浮在上面时，下划线是不显示的。transform 的变形中心位置为元素中心，这样，就做到了以中心为基础的下划线展开。

a:hover::before {
    transform: scale(1);
} a:active::before {
    height: 5px;
    bottom: 1px;
}

这里定义了下划线在各种动作下的属性。

a:hover::before { transform: scale(1); }即定义了鼠标悬浮时，下划线以 100% 大小显示。如上面所说的，transform 的变形中心位置为元素中心，所以就达到了如预览上的效果。

a:active::before定义的属性，就是在链接激活（按下）时的抬高效果。

是的，到这里，整个链接下划线动画就结束了！

“诶~那么后面还有的内容呢？”

div a {
	color: #fff !important;
} div a::before {
	display: none;
}

这里，实际上是为了兼容性考虑。

众所周知，超级多的地方，都用<div><a>文本</a></div>这样的组合来达到按钮的效果。这一行就是为了这些情况考虑。如果不加入这些，你就极有可能看到：

这样的问题。

为了避免这种问题，使用div a { color: #fff !important; }将颜色改回白色（也可以不要=-=），使用div a::before { display: none; }关闭下划线。

其实，这种全局定义，问题一般不仅有这么多，不管如何，修复这种问题都需要一定的技术和复杂的手段，这个办法也只是修复了一个问题。要想有很好的兼容性，还是要自己慢慢修改，定义吧。