Part I: basic knowledge
1. Unlike: Active and: Hover these pseudo classes are not the same, they are all pseudo elements.
The 2.:before/:after pseudo elements are presented in the CSS2. And:: Before/::after is the writing in CSS3, so the new proposed is to use two colons to represent pseudo elements to distinguish pseudo class.
3. They are used in CSS after a certain selector, in order to add decorative content, because this can be semantic, if the use of HTML to add some of the actual content of the nodes or auxiliary samples of text, they are meaningless.
4. They have unique attribute content, which is added by default as inline elements.
5. The pseudo element created by default is above the attached element, we can use z-index:-1; put it down below.
6. They are virtual nodes, not real nodes. Such as:
|
div::after{
Content: "";
border:thinsolidred;
}
|
We can see in the browser:
:: After is not a real node, in fact, we can often see their use on some sites.
Elements such as 6.input,img,iframe cannot contain other elements, so it is not possible to insert content through pseudo elements.
Part II: Application
1. Do spacer.
|
<! DOCTYPE html>
<metacharset= "UTF-8" >
<title> pseudo Element </title>
<style>
a{
Color:blue;
Text-decoration:none;
}
. log:after{
Content: "|";
color:red;
}
</style>
<body>
<ahref= "" class= "log" > Login </a><ahref= "" > Registration </a>
</body>
|
The effect is as follows:
2. Make a triangle
|
<! DOCTYPE html>
<metacharset= "UTF-8" >
<title> pseudo Element </title>
<style>
a{
Color:blue;
Text-decoration:none;
}
. log:before{
Content: "";
Display:inline-block;
width:0;
height:0;
border:10px solid Transparent;
border-left:10px solid red;
}
</style>
<body>
<ahref= "" class= "log" > Login </a>
</body>
|
The effect looks like this:
3. Clear float (the content below is taken from Rok Zhang Xinsen-Xu da Shen)
|
<! DOCTYPE html>
<metacharset= "UTF-8" >
<title> pseudo Element </title>
<style>
. box{padding:10px; background:gray;}
. Fix{*zoom:1;}
Fix:after{display:block content: "clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
. L{float:left;}
</style>
<body>
<divclass= "box fix" >
</div>
</body>
|
The effect is as follows:
Note: Where *zoom:1 is used to clear floating in IE6 (used on the parent element of a floating element).
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
