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

本文介绍: 初始下划线为短线，垂直在链接左侧-20px 位置，hover后旋转并伸长至链接文字下方，形成下划线效果。这里主要用到 transform的rotate 属性。说明：利用before和after伪元素实现链接文字 hover双重效果，也可以单独使用一种。初始为读取文字覆盖在链接文字上，hover后向上闪出。

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

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

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

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

以下是代码，可分别复制到网页的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>

原文地址:https://blog.csdn.net/dp design/article/details/128110467

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_9569.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

hover 下划线链接

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

相关文章

发表回复 取消回复

发表回复取消回复