首页 > 代码库 > css中伪类元素:before及:after用法浅谈

css中伪类元素:before及:after用法浅谈

2024-08-25 19:22:03   217人阅读

JS代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.wrap{
				margin-top: 10px;
				width: 150px;
				padding: 10px;
				position: relative;
			}
			.wrap span:nth-of-type(1){
				vertical-align: bottom;
				display: inline-block;
				border: 1px solid black;
				padding: 10px;
				transition: 0.5s;
			}
			.wrap span:nth-of-type(2){
				height: 17px;
				vertical-align: bottom;
				display: inline-block;
				padding: 10px;
				padding-left: 100px;
				border-bottom: 1px solid black;
				transition: 0.5s;
			}
			.wrap span:nth-of-type(3){
				display: inline-block;
				position: absolute;
				left: 50px;
				top: 22px;
			}
		</style>
	</head>
	<body>
		<div class="wrap" id="wrap">
			<span>?</span><span></span><span> Read More</span>
		</div>
	</body>
	<script>
		var oDiv = document.getElementById("wrap");
		var Span1 = document.getElementsByTagName("span")[0];
		var Span2 = document.getElementsByTagName("span")[1];
		var Span3= document.getElementsByTagName("span")[2];
		oDiv.onmouseover = function(){
			oDiv.style.color ="red";
			Span1.style.borderColor="red";
			Span1.style.transform="rotateX(180deg)";
			Span2.style.borderColor="red";
			Span2.style.transform="rotateX(180deg)";
			oDiv.onmouseout =  function(){
				oDiv.style.color ="";
				Span1.style.borderColor="";
				Span1.style.transform="";
				Span2.style.borderColor="";
				Span2.style.transform="";
			}
			
		}
	</script>
</html>

无JS,用伪类编辑的css代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.sp:hover{
				color: red;
			}
			.sp:hover:before,
			.sp:hover:after {
				color: red;
				transform: rotateX(180deg);
				border-color: red;
			}
			
			.sp:before {
				transition:0.5s;
				padding: 10px;
				content: ‘?‘;
				border: 1px solid black;
				display: inline-block;
			}
			
			.sp:after {
				content: ‘ ‘;
				width: 80px;
				transition:0.5s;
				padding: 19px;
				position: relative;
				top: 14px;
				left: -96px;
				border-bottom: 1px solid black;
				display: inline-block;
			}
		</style>
	</head>

	<body>
		<div class="wrap" id="wrap">
			<span class="sp">  Read More</span>
		</div>
	</body>

</html>

 效果:技术分享

css中伪类元素:before及:after用法浅谈


联系
我们