纯CSS，利用before、after伪元素实现的几种链接hover效果三：上划线下划线滑出效果

三：上划线下划线滑出效果 

说明：利用before和after伪元素实现链接文字hover上划线和下划线滑动伸出效果，也可以单独使用一种。

before：初始上划线width为0，在文字上方-5px位置，hover后伸长至width为100%。

after：初始下划线width为0，在文字下方30px位置，居右，hover后伸长至width为100%。。

以下是代码，可分别复制到网页的css部分和HTML部分测试效果。

css部分：
 

.dp {
	    margin:60px auto;
	    width:500px;
	}
.dp a {
	    text-decoration:none;
        color:#616161;
	}
.dp a span {
	    position:relative;
	}
.dp a span:hover {
	    color:#a13;
	}
/*====before部分======*/
.dp a span::before {
	    content:"";
		width:0;
		height:2px;
		background:#a13;
		position:absolute;
		left:0;
		top:-5px;
		transition:0.2s;
	}
.dp a span:hover::before {
		width:100%;
	}
/*====after部分======*/
.dp a span::after {
	    content:"";
		height:2px;
		width:0;
		background-color:#a13;
		position:absolute;
		right:0;
		top:30px;
		transition:.2s;
	}
.dp a span:hover::after {
		width:100%;
	}

html部分：

<p class="dp"><a href="#"><span data-hover="CSDN - 专业开发者社区">CSDN - 专业开发者社区</span></a></p>