<>css Pseudo element selector before and after Use of
preface : Recently, I collected some information about before and after Use of , Sum it up , Incomplete , however , I hope it will be convenient for you to check it later .
:before The role of : At the front of the child element , Add a pseudo element , Pseudo element content through content
control , Can be in the content Property to write text content , But it is usually an empty string .
:after The role of : At the end of the child element , Add a pseudo element , Pseudo element content through content
control , Can be in content Property to write text content , But it is usually an empty string .
before and after Points for attention :
1. Must be set content
2. The default is in line elements
If you want to set the size , The display mode needs to be changed
display: block/inline-block;
Or positioning position: absolute/fixed;
3. before and after All pseudo elements , It's not a real element , Cannot add hover,
And Can't pass js Get it
before and after Usage scenarios of :
1. Clear float
2. Add mask layer perhaps Add small icon
<>1. Clear float
.clearfix:after { content: ""; display: block; /* Remove the effects of floating elements */ clear: both;
height: 0; line-height: 0; visibility: hidden; }
<>2. Add small icon
css code
<style> * { padding: 0; margin: 0; box-sizing: border-box; } ul { width:
400px; height: 50px; border: 1px solid #000; margin: 150px auto ; text-align:
center; } ul li { width: 25% ; height: 50px; list-style: none ; border: 1px
solid #000; text-decoration: none ; float: left; line-height: 50px; position:
relative; } .new:before { content: '' ; width: 36px; height: 23px; position:
absolute ; top:0px ; right: 0px; background-image: url('./images/icon.png'); }
</style>
effect
Technology