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

dpdesign

已于 2022-11-30 12:06:46 修改

阅读量1.7k

点赞数

分类专栏： css 文章标签： css css3 html

于 2022-11-30 10:52:37 首次发布

本文链接：https://blog.csdn.net/dpdesign/article/details/128110467

版权

CSS 伪元素 hover效果 transform transition

关键词由CSDN通过智能技术生成

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

说明：利用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;/*=====