:Using :before and :after in CSS-knowledge base免费ppt模版下载-道格办公

(clicktop public public number, you can quickly follow)

Author: Beast'
URL: http://www.cnblogs.com/ys-ys/p/5092760.html

A few nights ago, I took a comprehensive look at some documents and materials of css. Most of the styles are used without any major problems, but they are a little unfamiliar, but I also know their existence and the style of their implementation. Today I mainly want to write not much in this study note, mainly to write some content for :before and :after, and introduce a few small styles slightly.

What are :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 some content after an element.

Let's run a simple code to test the effect:

<style>
p:before{< /span>
content: 'H' /*:before and:after must have skills, the importance is at least 5 stars*/
}
p:after{< /span>
content: 'd' /*:before and:after must have skills, the importance is at least 5 stars*/
}
</style>
<p>ello Worl</p>

The above code will display "Hello World" on the page. What we see through the browser's "inspect element" is:

<p>
::before
'ello Worl'
::after
</p>

A :before pseudo-element will be inserted in front of the content inside the p tag, and the content contained in the pseudo-element is "H"; and a :after pseudo-element will be inserted after the content in the p tag, and the content contained in the element will be It is "d". As a qualified program monkey, it is necessary to defend the complete existence of "Hello World".

Since the notes are mainly aimed at :before and :after, it is definitely not just a brief introduction above. Let's see how to use them normally.

1. Combining border to write a dialog box style.

This beast splits the above sentence into 2 parts: combined with border, write a dialog box style.

Since it is combined with borders, let's turn to a small topic first, and briefly introduce how to use borders to draw triangle styles (this triangle is needed when writing dialog box styles):

<style>
.triangle{
width: 0;
height: 0;
border-left:< span class='crayon-i ' >50px solid red;
border-bottom:< span class='crayon-i ' >50px solid blue;
border-top:< span class='crayon-i ' >50px solid black;
border-right:< span class='crayon-i ' >50px solid purple
}
</style>
<div class< span class='crayon-o' >='triangle'></div>

The above code will display a square on the page with a red triangle on the left, a purple triangle on the right, a black triangle on top, and a blue triangle on the bottom. Then someone will ask, isn't what we want a triangle? Beast, why don't you draw a square to tease me?

Let's make some modifications to the above style:

.triangle{
width: 0;
height: 0;
border:50px transparent solid; < span class='crayon-c' >/*Here we set the border width of the element to 50px, transparent means the border color is transparent, solid means the border is a solid line*/
border-top-color: black; /*Here we only set the color of the upper border to black, as we all know, the style code behind the css will overwrite the same style code before, as for The other three sides are still transparent*/
/*border-bottom-color: black; /*Here set the bottom border color to black*/
border-left-color: black; /*Here set the left border color to black*/
border-right-color:black*/ /*Here set the right border color to Black*/
}

Then at this time we will see a triangle pointing down at the top. The explanation has been written in detail in the comments of the css style.

Next we add :before:

<style>
.test-div{
position: relative; /*Daily relative positioning*/
width:150px;
height:36px;
border-radius:< span class='crayon-i ' >5px;
border:black 1px solid;
background: rgba(245,245,245,1)
}
.test-div:before{
content: ''; /*:before and :after must have skills, the importance is at least 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< span class='crayon-i ' >='test-div'></div>

Through the above code, we will see a dialog box style similar to WeChat/QQ, but the fly in the ointment is that the borders around the dialog box are not complete, but on the protruding triangle of the dialog box is a T_T moment with a wooden frame If there is a cold spot, what should I do? Let the call: after come to the rescue wearing a cotton coat~

Full code:

<style>
.test-div{
position: relative; /*Daily relative positioning*/
width:150px;
height: 36px;
border:black 1px solid;
border-radius:< span class='crayon-i ' >5px;
background: rgba(245,245,245,1)
}
.test-div:before,.test-div:after{
content: ''; /*:before and :after must have skills, the importance is at least 5 stars*/
display: block;
position: absolute; /*Daily absolute positioning*/
top:8px;
width: 0;
height: 0;
border:6px transparent solid;
}
.test-div:before{
left:-11px;
border-right-color: rgba(245,245,245,1);
z-index:< span class='crayon-i' >1
}
.test-div:after{
left:-12px;
border-right-color: rgba(0,0,0,1);
z-index:< span class='crayon-h' > 0
}
</style>
<div class< span class='crayon-i ' >='test-div'></div>

Well, a complete dialog box style is presented in front of you. As for the direction of the small triangle in the dialog box, I believe everyone knows what to do after reading the code introduced in the previous section for border. Yes, just change the position Change the position of the border to display the color~ (This beast doesn’t like to post pictures, please be considerate, if you need it, you can copy the code and run it directly to see the effect. Making wheels is not just making wheels, it can also deepen people’s impression, which is better understanding)

2. As a translucent background layer for content.

For example, our requirement is to make a translucent login box (here is also explained by comments in the code):

<style>
body{
background: url(img/1.jpg) no -repeat left < span class='crayon-i ' >top /*This beast adds a picture background, use To distinguish the translucency of the background from the complete opacity of the content*/
}
.test-div{
position: relative; /*Daily relative positioning (important, will be introduced below)*/
width:300px;
height: 120px;
padding: 20px 10px;
font-weight:< span class='crayon-h' > bold;
}
.test-div:before{
position: absolute; /*Daily absolute positioning (important, the following content will also be briefly introduced)*/
content: ''; /*:before and :after must have skills, the importance is at least 5 stars*/
top:0;
left: 0;
width: 100%; /*The same width as the content*/
height: 100%; /* same height as content*/
background: rgba(255,255,255,.5); / *Given a white background with a transparency of 50%*/
z-index:< span class='crayon-i ' >-1 /* Daily element stacking order (important, the following content There will also be a brief introduction)*/
}
</style>

<div class< span class='crayon-i' >='test-div'>
<table>
<tr>
<td>Name</td>
<td><input placeholder< /span>='your name' /></td>
</tr>
<tr>
<td>Password</td>
<td><input placeholder< /span>='your password' /></td>
</tr>
<tr>
<td></td>
<td><input type< /span>='button' value ='login' /></td>
</tr>
</table>
</div>

Copy the above code and add a picture to test the effect.

Of course, there are more clever uses of :bofore and :after, and I won’t list them one by one here. Here’s one that uses these two pseudo-elements plus css3 animation to achieve some pretty and practical dynamic effects. Link: HoverEffectIdeas

After talking about :before and :after, let’s discuss some other css styles and layout attention points (maybe you don’t pay much attention, which may cause some layout and style problems).

Possible positioning

The position attribute specifies the positioning type of the element, and the default is static.

This attribute can also have the following values:

absolute: Generates an absolutely positioned element, positioned relative to the first parent element other than static positioning.

fixed: Generates absolutely positioned elements, positioned relative to the browser window.

relative: Generates a relatively positioned element, positioned relative to its normal position.

inherit: Specifies that the value of the position attribute should be inherited from the parent element.

code:

<style>
body{
height: 2000px /*The height of the body is set to 2000px here to distinguish the difference between absolute and fixed*/
}
.test-div{
position:absolute;
left:50px;
top:50px
}
</style>
<div class='test-div '>Hello World</div>

<style>
body{
height: 2000px /*The height of the body is set to 2000px here to distinguish the difference between absolute and fixed*/
}
.test-div{
position:fixed;
left:50px;
top:50px
}
</style>
<div class='test-div '>Hello World</div>

<style>
.out-div{
width: 300px;
height: 300px;
background: purple; /*Define a background here, let us know where this div is*/
margin:50px 0px 0px 50px< span class='crayon-sy' >;
position: relative
}
.in-div{
position:absolute;
left:50px;
top:50px
}
</style>
<div class< span class='crayon-i' >='out-div'>
<div class< span class='crayon-i ' >='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 property is zIndex.

The larger the value of z-index, the higher the stacking level of the element.

code:

<style>
.first-div{
width: 300px;
height: 300px;
background: purple; /*Define a background here, let us know where this div is*/
position: absolute;
left:50px;
top:50px;
z-index:< span class='crayon-h' > 1
}
.second-div{
position:absolute;
left:80px;
top:80px;
width:50px;
height: 50px;
background: white;
z-index:< span class='crayon-h' > 2
}
</style>
<div class< span class='crayon-i ' >='first-div'></div>
<div class< span class='crayon-i ' >='second-div'></div>

Here we put the position of the first div and the second div together to see the effect of z-index. The style of the above code is a purple square with a small white square inside it. Because the z-index of the small square is greater than the z-index of the large square, it can be shown that when we set the z-index of .first-div to 3, the small white square cannot be seen at this time, it is covered by purple The big square ruthlessly blocked...

zoom element scaling

zoom is applicable to all elements and is used to set or retrieve the zoom ratio of the object. The corresponding script feature is zoom, and the value of the original ratio 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< span class='crayon-i ' >='first-div'></div>
<div class< span class='crayon-i ' >='second-div'></div>
<div class< span class='crayon-i ' >='third-div'></div>

The above code will display purple-black-red divs in order, and the sizes are 1.5 times, 1 times, and 0.5 times of 100px respectively.

What are em and rem?

1em is equal to the current font size, and changing the value means adjusting the font size. em has the feature of inheritance, that is to say, the external parent element defines the em size of the font, and the internal child elements will inherit the style of this property.

rem = root em. As the name suggests, root is the root and the top. That is, the em at the root, which refers to the HTML root element. So the size of rem is to adjust the relative size of the font according to the size of the HTML root element.

code:

<style>
body{
font-size:< span class='crayon-h' > 12px;
}
/*html{
font-size: 12px;
}*/
div{
width: 200px;
height: 100px;
float:left
}
.first-div{
font-size:< span class='crayon-h' > 1em
}
.second-div{
font-size:< span class='crayon-h' > 2em
}
.third-div{
font-size:< span class='crayon-h' > 1rem
}
.fourth-div{
font-size:< span class='crayon-h' > 2rem
}
</style>
<div class< span class='crayon-i ' >='first-div'>Hello World</div> ;
<div class< span class='crayon-i ' >='second-div'>Hello World</div> ;
<div class< span class='crayon-i ' >='third-div'>Hello World</div> ;
<div class< span class='crayon-i ' >='fourth-div'>Hello World</div> ;

The above codes show fonts of different sizes. The difference between em and rem can be seen by only annotating the body font style and html font style.

This article belongs to the CSS category of "Front End Encyclopedia".

Reply CSSSee more CSS technical dry goods.

【Today's WeChat official account recommendation ↓】

Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/Using%20before%20and%20after%20in%20CSS.html