before伪类的demo

HTML demo
效果
点击：
在这里插入图片描述
释放：
在这里插入图片描述
代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 100px;
				height: 100px;
				margin: 10px;
				background-color: #dfdfdf;
				position: relative;
			}
			.box:before{
				width: 0;
				height: 0;
				/* 设置透明度的时候不要设置边框颜色 */
				border-bottom: 50px solid transparent;
				border-top: 50px solid transparent;
				border-left: #269ABC 50px solid ;
				display: block;
				position: absolute;
				left: 100px;
				/* 必须要 */
				content: " ";
				display: none;
			}
			.box:hover:before{
				display: block;
			}
			
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
版权声明：本文为qq_44788119原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。