CSS pseudo class: before,: after

Last Update:2017-01-13 Source: Internet

Author: User

Tags relative

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The code is as follows:

Copy code

<! Doctype html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/>
<Title> pseudo-class pilot... </title>
<Style type = "text/css">
/* In the css section, pay attention to the values of border, margin, left, and right */
Body {background: # EEE; margin: 0px; padding: 0px; font-size: 14px; font-family: Microsoft Yahei; color: # FFF ;}
# Nav_demo {overflow: hidden; width: 520px; margin: 100px auto 0px ;}
# Nav_demo span {float: left; position: relative; padding: 0px 10px; height: 30px; line-height: 30px; margin-left: 20px; cursor: pointer ;}
. Shenzhen {background: # 4FA3DA ;}
. Guangzhou {background: #666912 ;}
. Shanghai {background: # 9B44BC ;}
. Beijing {background: #9B2222 ;}
. Chengdu {background: #804B12 ;}

. Shenzhen: hover {background: #387399 ;}
. Guangzhou: hover {background: # 4B4D0E ;}
. Shanghai: hover {background: #692A81 ;}
. Beijing: hover {background: # 711A1A ;}
. Chengdu: hover {background: # 59390E ;}

. Shenzhen: before,. shenzhen: after,. guangzhou: before,. guangzhou: after {
Border-style: solid;
Border-width: 15px 10px;
Content :"";
Height: 0;
Position: absolute;
Top: 0;
Width: 0;
}
. Shenzhen: before {border-color: # 4FA3DA # 4FA3DA transparent; left:-20px ;}
. Guangzhou: before {border-color: #666912 #666912 transparent; left:-20px ;}
. Shenzhen: after {border-color: transparent # 4FA3DA # 4FA3DA; right:-20px ;}
. Guangzhou: after {border-color: transparent #666912 #666912; right:-20px ;}

. Shenzhen: hover: before {border-color: #387399 #387399 transparent; left:-20px ;}
. Guangzhou: hover: before {border-color: # 4B4D0E # 4B4D0E transparent; left:-20px ;}
. Shenzhen: hover: after {border-color: transparent #387399 #387399; right:-20px ;}
. Guangzhou: hover: after {border-color: transparent # 4B4D0E # 4B4D0E; right:-20px ;}

# Tips {float: right; margin-right: 200px; margin-top: 20px; color: #8BA612; width: 280px; background: #333; border: solid 1px #000; padding: 5px 10px ;}
# Header {position: absolute; top: 0px; width: 100%; height: 30px; line-height: 30px; background: #333; border-bottom: solid 1px #000 ;}
# Header span {padding-left: 30px; padding-right: 10px ;}
# Header a {text-decoration: none; color: #8BA612 ;}
# Header a: hover {text-decoration: underline ;}
# Footer {position: absolute; bottom: 0px; width: 100%; text-align: center; height: 30px; line-height: 30px; background: #333; border-top: solid 1px #000 ;}
# Footer a {color: #8BA612; text-decoration: none; padding-left: 5px ;}
# Footer a: hover {text-decoration: underline ;}
</Style>
</Head>

<Body>
<Div id = "header"> <span> return </span> <a href = http://www.111cn.net> Back to the grass .. CSS pseudo-class: before,: after </a> </div>
<Div id = "nav_demo">
<Span class = "shenzhen"> 8.29 shenzhen </span>
<Span class = "guangzhou"> 9.10 guangzhou </span>
<Span class = "shanghai"> shanghai 10.15 </span>
<Span class = "beijing"> 11.12 beijing </span>
<Span class = "chengdu"> 12.10 chengdu </span>
</Div>
<Div id = "tips"> Tips: If you use IE6 IE7, you should be able to see no results... </div>
<Div id = "footer"> </div>
</Body>
</Html>

For an instance with an upper area, let's take a look at it.

The code is as follows:	Copy code
<! -- Only the first and second members added the effect (SHENZHEN. Guangzhou) --> <Div id = "nav_demo"> <Span class = "shenzhen"> 8.29 shenzhen </span> <Span class = "guangzhou"> 9.10 guangzhou </span> <Span class = "shanghai"> shanghai 10.15 </span> <Span class = "beijing"> 11.12 beijing </span> <Span class = "chengdu"> 12.10 chengdu </span> </Div>

Css section

The code is as follows:

Copy code

/* In the css section, pay attention to the values of border, margin, left, and right */
# Nav_demo {margin-top: 20px; margin-left: 20px; font-size: 12px; font-family: Microsoft Yahei; overflow: hidden ;}
# Nav_demo span {float: left; color: # FFF; position: relative; padding: 0px 10px; height: 30px; line-height: 30px; margin-left: 20px; cursor: pointer ;}
. Shenzhen {background: # 4FA3DA ;}
. Guangzhou {background: #666912 ;}
. Shanghai {background: # 9B44BC ;}
. Beijing {background: #9B2222 ;}
. Chengdu {background: #804B12 ;}

. Shenzhen: hover {background: #387399 ;}
. Guangzhou: hover {background: # 4B4D0E ;}
. Shanghai: hover {background: #692A81 ;}
. Beijing: hover {background: # 711A1A ;}
. Chengdu: hover {background: # 59390E ;}

. Shenzhen: before,. shenzhen: after,. guangzhou: before,. guangzhou: after {
Border-style: solid;
Border-width: 15px 10px;
Content :"";
Height: 0;
Position: absolute;
Top: 0;
Width: 0;
}
. Shenzhen: before {border-color: # 4FA3DA # 4FA3DA transparent; left:-20px ;}
. Guangzhou: before {border-color: #666912 #666912 transparent; left:-20px ;}
. Shenzhen: after {border-color: transparent # 4FA3DA # 4FA3DA; right:-20px ;}
. Guangzhou: after {border-color: transparent #666912 #666912; right:-20px ;}

/* Pseudo classes can be used in combination like below ...*/
. Shenzhen: hover: before {border-color: #387399 #387399 transparent; left:-20px ;}
. Guangzhou: hover: before {border-color: # 4B4D0E # 4B4D0E transparent; left:-20px ;}
. Shenzhen: hover: after {border-color: transparent #387399 #387399; right:-20px ;}
. Guangzhou: hover: after {border-color: transparent # 4B4D0E # 4B4D0E; right:-20px ;}

[The following error occurs in the first condition:-: before,: after pseudo-class. You can add an effect to the element without adding the html code]
The pseudo class before, after. just like the meaning of a word, it is used to implement certain effects before or after the elements used. however, there may be some compatibility issues, such as IE8, IE8 +, Chrome, Safari, and Firefox.

[2nd condition-border: on an element with a width and a height of 0, the four directions are triangles]
We have seen a long time ago that we can use pure css to achieve a different effect. In fact, we also use the border feature in css.
You can test it by yourself and add a wide border to an element with a width and a height of 0. At the same time, set different color values for the four directions of border. then we will find that the top, bottom, and bottom of border are triangles (this is used for testing when the width and height are 0. it's not that the border is a triangle ..?? ~~). That is to say, the border in the four directions of the border is closely connected by the slope.

[The four parameters-border-color of the first condition can be set to the transparency of the adjacent two sides, and the color of the other two sides can be the same]
Then, the border-color attribute value contains a transparent (transparent). Just like the definition of margin, border-color has four parameters, representing the top, right, bottom, the left color value. in this way, as long as the color of the adjacent sides is set to transparent, and the color of the other sides is set to the same color, a triangle will appear.

After that, how to control the triangle size. be sure to pay attention to the elements with a width and a height of 0. the sum of the upper and lower borders is the actual height of the element, and the sum of the left and right borders is the actual width of the element. Therefore, do not think about inertia. Consider the width and height of an edge as the actual width and height. in this way, the calculation results will be confusing ..
This ugly demo below is a border element with a width and a height of 0.

Top border: 80px #387399
Right border: 60px # 4B4D0E
Bottom frame: 40px #692A81
Left border: 20px # 711A1A

[4th conditions-reasonable height and width control]
The css code has a comment at the top, saying that you should pay attention to the values (border, margin, left, right ). the reason is that the height of the triangle must be the same as that of the content, and it will not be covered by the elements next to it. this requires calculation.
Understand the above description of the border height and width. We recommend that you specify the height in the content section, instead of using padding to open the content, because the height of the text section varies with the font, it is difficult to precisely control the height. of course, if you have thoroughly studied fonts, you can try again ..
The use of before and after pseudo classes occupies a certain amount of space. Therefore, the actual width of border needs to be calculated, and the spacing between elements needs to be appropriately increased, at least increase to the width of border (avoid being covered by the following elements in the Triangle area. Of course, there are other ways to avoid this problem. ).

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More