纯CSS，利用before、after伪元素实现的几种链接hover效果二：半透明幕布打开效果

二：半透明幕布打开效果 

说明：利用before和after伪元素实现链接文字hover半透明幕布打开效果，前提是页面背景要是白色。

before：初始为白色背景，透明度为0.5，覆盖在链接文字左半边。

after：初始为白色背景，透明度为0.5，覆盖在链接文字右半边。

hover后，before和after分别向两侧打开，即width为0。

以下是代码，可分别复制到网页的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:25px;
		width:50%;
		background-color:#fff;
		position:absolute;
		left:0;
		top:0;
		transition:.2s;
        opacity: .5;
	}
.dp a span:hover::before {
		width:0;
	}
/*=====after部分=====*/
.dp a span::after {
	    content:"";
		height:25px;
		width:50%;
		background-color:#fff;
		position:absolute;
		right:0;
		top:0;
		transition:.2s;
        opacity: .5;
	}
.dp a span:hover::after {
		width:0;
	}
	

html部分：

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