当前位置：网站首页>Simple understanding of pseudo elements before and after

Simple understanding of pseudo elements before and after

2022-06-11 06:01:00 【Not bald】

Pseudo elements before,after A simple understanding of

1.before,after brief introduction
- 2.content attribute
- - - 3. And hover combination

1.before,after brief introduction

Both are based on display:inline-block（ Horizontal block level arrangement ） Attribute of exists ,::before Is to add content before the original element ,::after Is to add content after the original element , At the same time, the pseudo element also inherits the attributes of the original element , Just like if the original text is black , The text of pseudo elements will also be black .

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div::before{
    
				content: " A piece of writing ";
				
			}
		</style>
	</head>
	<body>
		<div style="color: #55FFFF;">
			
		</div>
	</body>
</html>

Insert picture description here

2.content attribute

content Properties can be written in , Like text , Symbol , Of course, you can not write .
1） written words
As the example in the introduction .
2） Symbol

<div>
			<q> I am a text I am a text I am a text </q>
		</div>

div::before{
    
				width: 200px;
				height: 200px;
				background-color: #87CEEB;
				content: open-quote;
			}
			div::after{
    
				content: close-quote;
			}
			q{
    
				quotes: '<''>';
			}

Insert picture description here

3. And hover combination

And hover There will also be some good-looking effects after the combination .

.one{
    
			width: 500px;
			height: 200px;
			background-color: #7FFFD4;
			margin: 0 auto;
		}
			.one::after {
    
			  content: '';
			  position: absolute;
			   left: 0;
			   top: 0;
			   bottom: 0;
			   right: 0;
			   transition: .3s;
			   
			   background: #ffffff;
			   transform-origin: left;
			   transform: scaleX(0);
			 }
			
			 .one:hover::after {
    
			   transform: scaleX(1);
			 }