纯CSS，利用before、after伪元素实现的几种链接hover效果四：小太阳闪现效果

四：小太阳闪现效果 

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

before：border设置为dotted，border-radius为50%，利用transform的scale属性设置放大2倍。

after：同上，只是初始大小与before不同即可。

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

css部分：

.dp {
	    margin:60px auto;
	    width:500px;
	}
.dp a {
	    text-decoration:none;
        color:#a5a5a5;
	}
.dp a span {
	    position:relative;
	    background:#fff;
	}
.dp a span:hover {
	    color:#333;
	}
/*====before部分======*/
.dp a span::before {
	    content:"";
		height:23px;
		width:23px;
	    border:1px dotted #555;
	    border-radius:50%;
		position:absolute;
		left:50%;
		top:50%;
		transition:.2s;
	    z-index:-1;
        transform: translateX(-50%) translateY(-50%) ;
        opacity: 0;
	}
.dp a span:hover::before {
		opacity: .5;
        transform: translateX(-50%) translateY(-50%) scale(2);
	}
/*====after部分======*/
.dp a span::after {
	    content:"";
		height:18px;
		width:18px;
	    border:1px dotted #aaa;
	    border-radius:50%;
		position:absolute;
		left:50%;
		top:50%;
		transition:.2s;
	    z-index:-2;
        transform: translateX(-50%) translateY(-50%) ;
        opacity: 0;
	}
.dp a span:hover::after {
        opacity: .7;
        transform: translateX(-50%) translateY(-50%) scale(2);
	}

html部分：

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