纯CSS，利用before、after伪元素实现的几种链接hover效果一：旋转下划线加链接文字上闪效果

一：旋转下划线加链接文字上闪效果 

说明：利用before和after伪元素实现链接文字hover双重效果，也可以单独使用一种。

before：初始下划线为短线，垂直在链接左侧-20px位置，hover后旋转并伸长至链接文字下方，形成下划线效果。这里主要用到transform的rotate属性。

after：初始为读取文字覆盖在链接文字上，hover后向上闪出。

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

css部分：

	.dp {
	    margin:60px auto;
	    width:500px;
	}
	.dp a {
	    text-decoration:none;
	}
	.dp a span {
	    position:relative;
	}
	.dp a span:hover {
	    color:#f00;
	}
/*=======before设置旋转下划线=======*/
	.dp a span::before {
	    content:"";
		height:4px;
		width:20px;
		background-color:#f11;/*=======下划线颜色=======*/
		position:absolute;
		left:-20px;
		top:10px;
		transition:.3s;/*=======过渡效果时间，这里是0.3秒=======*/
        transform: rotate(90deg);/*=======初始下划线设置在右侧垂直角度=======*/
	}
	.dp a span:hover::before {
	    left:0;
		top:30px;
		width:100%;
		height:2px;
        transform: rotate(180deg);/*=======过渡后下划线旋转角度，这里是180度，也可以设为0度，旋转方向会相反=======*/
	}
/*=======after设置上闪文字=======*/
	.dp a span::after {
	    content:attr(data-hover);/*=======内容读取data-hover=======*/
		height:2px;
		width:100%;
		position:absolute;
		left:0;
		top:0;
		transition:.2s;
        opacity: 1;
	}
	.dp a span:hover::after {
    	left:0;
		top:-20px;
		width:100%;
		height:2px;
        opacity: 0;
	}
	

 html部分：

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

代码007普通

打赏 收藏 海报 链接