CSS in before and: after the example

A few days ago the evening more comprehensive to see the next CSS some of the documents and materials, most of the style of use is no big problem, just a little more unfamiliar, but also know their existence and implementation of what style. Today mainly want to write in this study note is not much, mainly for: Before and: After writing some content, there are a few small style with the introduction of slightly.
What is: Before and: After? How to use them?
: Before is a pseudo element in CSS that can be used to insert some content before an element.
: After is a pseudo element in CSS that can be used to insert something after an element.
Now let's run a simple code test effect:

<style>
p:before{
Content: "H"/*:before and: After the required skills, the importance of full 5 stars * *
}
p:after{
Content: "D"/*:before and: After the required skills, the importance of full 5 stars * *
}
</style>
<p>ello worl</p>
The above code will show "Hello World" on the page. What we see through the browser's "review element" is:

<p>
:: Before
"Ello Worl"
:: After
</p>
The contents of the P tag are inserted in front of a: before pseudo element, the pseudo element contains "H", and the content within the P tag is inserted after the pseudo element, which contains the content "D". As a qualified program monkey, it is necessary to defend the integrity of "Hello world".
Since the notes are mainly for: before and: After, then certainly will not just have more than a simple introduction on the finished. Let's take a look at how we normally use them.
1. Combine border to write a dialog box style.
The beast divided the above sentence into 2 parts: combining border, writing a dialog box style.
Since it is a combination of border, then we first turn to a small topic, simple and easy to introduce how to use border to draw a triangular style (this triangle in the Writing dialog box style needs):

<style>
. triangle{
width:0;
height:0;
border-left:50px solid red;
border-bottom:50px solid blue;
border-top:50px solid black;
border-right:50px Solid Purple
}
</style>
<div class= "Triangle" ></div>
The above code will show a square on the page, a red triangle on the left, a purple triangle on the right, a black triangle above, and a blue triangle below. Then someone would ask, "Don't we want a triangle?" Beast, will you draw a square to amuse me?
Let's make some changes to the style above:

. triangle{
 width:0
 height:0
 border:50px transparent solid; * Here we set the border width of the element to 50px, Transparent indicates that the border color is transparent, solid represents a solid line of */
 border-top-color:black;/* Here we only set the color of the top border to black, as we all know, The style code behind the CSS overrides the same style code before, as for the other three edges, the transparent color */
 /*border-bottom-color:black;/* Set the bottom border color to black */
  Border-left-color:black; /* Here set the left border color is black */
 border-right-color:black*//* Here set the right border color is black */
 
and then we'll see a triangle down in the direction of the top. Explanations have been written in detail in CSS style comments.
Next we add: Before:

<style>
 .test-div{
 position:relative;/* Daily relative positioning */
 width:150px;
  height:36px;
 border-radius:5px;
 border:black 1px solid;
 background:rgba (245,245,245,1)
 
 .test-div:before{
 content: ""; /*:before and: After must band skill, the importance is full 5 Star */
 display:block;
 position:absolute;/* Daily absolute positioning */
 top:8px ;
 width:0;
 height:0;
 border:6px Transparent solid;
 left:-12px;
 border-right-color:rgba (245,245,245,1);
 }
 </style>
 <div class= "Test-div" ></DIV>
with the above code, we'll see a dialog style similar to the micro-letter/qq, But in the ointment, the border around the dialog box is not complete, but in the dialog box on the prominent triangle is a wooden border t_t instant silence has wood, how to do? Let the call: after wearing a cotton coat to rescue bar ~
Full code:

<style>
. test-div{
position:relative; /* Daily relative positioning * *
width:150px;
height:36px;
border-radius:5px;
Border:black 1px solid;
Background:rgba (245,245,245,1)
}
. test-div:before{
Content: ""; /*:before and: After must bring the skill, the importance is full 5 stars * *
Display:block;
Position:absolute; * Daily absolute Positioning * *
top:8px;
width:0;
height:0;
BORDER:6PX transparent solid;
left:-12px;
Border-right-color:rgba (245,245,245,1);
}
</style>
<div class= "Test-div" ></div>
Okay, a complete dialog box style presented in front of, as for the small triangular direction of the dialog box, I believe you see the above paragraph for border introduced the code also know how to do it, yes, is to change the position of position, change the border display color of the location ~ ( The beast does not like to paste pictures, understanding the amount of the need to copy the code directly to see the effect of the operation, making the wheel is not only to build the wheel, but also can make people deepen the impression, better understanding)
2. A translucent background layer for content.
For example, our requirement is to make a translucent login box (which is also explained in code by annotations):

<style>
body{
Background:url (img/1.jpg) no-repeat left Top/* Here the beast adds a picture background to distinguish between the translucent background and the full opacity of the contents.
}
. test-div{
position:relative; /* Daily relative positioning (important, the following content will also be introduced) * *
width:300px;
height:120px;
padding:20px 10px;
Font-weight:bold;
}
. test-div:before{
Position:absolute; * Daily absolute positioning (important, the following will be slightly introduced) * *
Content: ""; /*:before and: After must bring the skill, the importance is full 5 stars * *
top:0;
left:0;
width:100%; /* and content the same width * *
height:100%; /* and content of the same height * *
Background:rgba (255,255,255,.5); /* Given background white, transparency 50%*/
Z-INDEX:-1/* Daily element stacking order (important, below will also introduce slightly) * *
}
</style>
<!--here The Beast steals a lazy, the layout is simple write-->
<div class= "Test-div" >
<table>
<tr>
<td>Name</td>
<td><input placeholder= "Your name"/></td>
</tr>
<tr>
<td>Password</td>
<td><input placeholder= "Your password"/></td>
</tr>
<tr>
<td></td>
<td><input type= "button" value= "Login"/></td>
</tr>
</table>
</div>
The above code copies the past, plus a picture to test the effect.
Of course,: Bofore and: After there are also more clever use, here is not listed here, here is a use of these two pseudo elements plus CSS3 animation to achieve some of the more good-looking and practical dynamic effect of the link: hovereffectideas
After that: Before and: After, let's take a little bit of other CSS styles and layout notes (probably not a lot of attention, leading to some layout and style problems).
The problem of position positioning
The Position property sets the positioning type of the element, which defaults to static.
This property can also have the following value:
Absolute: Generates an absolutely positioned element that is positioned relative to the first parent element other than static positioning.
Fixed: Generates an absolutely positioned element that is positioned relative to the browser window.
Relative: Generates a relatively positioned element that is positioned relative to its normal position.
Inherit: A value that stipulates that the position attribute should be inherited from the parent element.
Code:

<!--position:absolute-->
<style>
body{
height:2000px/* The height of the body is set to 2000px to distinguish the difference between absolute and fixed.
}
. test-div{
Position:absolute;
left:50px;
top:50px
}
</style>
<div class= "Test-div" >hello world</div>
<!--position:fixed-->
<style>
body{
height:2000px/* The height of the body is set to 2000px to distinguish the difference between absolute and fixed.
}
. test-div{
position:fixed;
left:50px;
top:50px
}
</style>
<div class= "Test-div" >hello world</div>
<!--position:relative + position:absolute-->
<style>
. out-div{
width:300px;
height:300px;
Background:purple; /* Here to define a background, let us know where this div is * *
margin:50px 0px 0px 50px;
Position:relative
}
. in-div{
Position:absolute;
left:50px;
top:50px
}
</style>
<div class= "Out-div" >
<div class= "In-div" >hello world</div>
</div>
Z-index element Stacking Sort
Z-index is used to set or retrieve the stacking order of objects, and the corresponding script attribute is zindex.
The larger the number of z-index, the higher the stacking level of the element.
Code:

<style>
 .first-div{
 width:300px
 height:300px;
 background:purple; /* Here to define a background, let us know where this div is */
 position:absolute;
 left:50px;
 top:50px;
 z-index:1
 }
 .second-div{
 position:absolute
 left:80px;
 top:80px;
 width:50px;
 height:50px;
 background:white;
 z-index:2
 
 </style>
 <div class= "First-div" ></DIV>
 <div class= "Second-div" ></DIV>
Here we put the first Div and the second Div position together to see the effect of the z-index. The style of the above code is a purple square with a small white square inside. Because the z-index of a small square is greater than the z-index of a large square, it can be shown that when we set the Z-index of the. First-div to 3, the little white square is not visible, and it is ruthlessly blocked by the big purple square ... The
Zoom element Scaling
Zoom applies to all elements to set or retrieve the magnification of the object, the corresponding script attribute is zoom, and the original scale value is 1.
Code:

<style>
 div{
 width:100px
 height:100px;
 float:left
 }
 .first-div{
 background:purple
 zoom:1.5
 
 .second-div{
  Background:black;
 zoom:1
 
 .third-div{
 background:red;
 zoom:.5
 }
 </style>
 <div class= "First-div" ></DIV>
 <div class= "Second-div" > </div>
 <div class= "Third-div" ></DIV>
the code above will show the purple-black-red div in turn. The size is 1.5 times times the 100px, 1 time times, 0.5 times times respectively.
What em and rem are
1em equals the current font size, and the change in value means a font size adjustment. EM has inherited this attribute, that is, the external parent element defines the em size of the font, and the inner child element inherits the style of the property.
Rem = root em. As the name suggests, Root is the root, the top. Which is the root of the EM, this root refers to the HTML root element. So REM size is an adjustment of the relative size of the font for the size of the HTML root element.
Code:

<style>
 body{
 font-size:12px;
 }
 /*html{
 font-size:12px
 }*/
 div{
 width:200px;
 height: 100px;
 float:left
 
 .first-div{
 font-size:1em
 }
 .second-div{
 font-size:2em
 
 .third-div{
 font-size:1rem
 . fourth-div{
 font-size:2rem
 
 </style>
 <div class= "First-div" > Hello world</div>
 <div class= "Second-div" >hello world</div>
 <div class= " Third-div ">hello world</div>
 <div class=" Fourth-div ">hello World</div>
The above code shows different sizes of fonts, and the difference between EM and REM can be seen by simply commenting the body font style and the HTML font style.