Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the practical skills of css pseudo-elements". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Definition: pseudo elements are used to create elements that are not in the document tree and add styles to them. For example, we can add some text before and after an element and style it by: before: after. Although the user can see the text, the text is not actually in the document tree. two。 Single and double colons of pseudo elements

When the specification is not clear before CSS2, pseudo elements are represented by a single colon (:)

The requirement in the CSS3 specification is to use a double colon (::) to distinguish between pseudo-elements and pseudo-classes; but for upward compatibility, it is now possible to use a single colon (:).

3. Working with scen

The following use before and after to insert pseudo elements in front and behind the elements to achieve some interesting small effects, code and rendering attached.

3.1 implement inserting text and font icon library with pseudo elements

3.1.1 insert text:

H2:before {

Content: "Hello"; / * insert text and set style in front of the title * /

Color: pink

Font-size: 20px

Width: 40px

Height: 40px;}

I am the title.

The effect is as follows:

3.1.2 insert iconfont font icon library:

@ font-face {

Font-family: 'iconfont'

Src: url ('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.eot');

Src: url ('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.eot?#iefix') format (' embedded-opentype'))

Url ('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.woff2') format (' woff2'))

Url ('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.woff') format (' woff'))

Url ('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.ttf') format (' truetype'))

Url ('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.svg#iconfont') format (' svg');}

H2:before {

Font-family: "iconfont"! important

/ * be sure to add * /

Content: "\ e601"

Color: pink

Font-size: 20px

Width: 40px

Height: 40px;}

I am the title.

According to the effect picture, we can see that the pseudo element is an inline element type.

3.2 clear floats

Solve the problem of high collapse of parent element caused by floating

.clear: after {

Content: ""

Display: block

Clear: both

}

Ul {

Background:pink

}

Li {

Float:left

Margin:0 20px;}

Hello world

Hello world

Hello world

Hello world

3.3 Segmentation line effect

P:before {

Content:''

Display:inline-block

Width:100px

Height:2px

Background:pink

Margin:5px

}

P:after {

Content:''

Display:inline-block

Width:100px

Height:2px

Background:pink

Margin:5px

}

Dividing line

Effect picture:

3.4 dialog box effect

Div {

Width: 180px

Height: 36px

Line-height: 36px

Background: # c0eeff

Border-radius: 5px

Font-size: 14px

Text-align: center

Position: relative;}

Div:before {

Content: ""

Position: absolute

Top: 10px

Left:-14px

/ * draw triangles * /

Width: 0

Height: 0

Border-top: 10px solid transparent

Border-right: 20px solid # c0eeff

Border-bottom: 10px solid transparent

Border-left: 0 solid # c0eeff

}

Come and chat with me.

The effect picture is as follows:

3.5 Photo cascading effect

Div {

Width: 400px

Height: 300px

Border: 8px solid # eee

Position: relative;}

Div img {

Width: 100%

Height: 100%;}

Div:before,div:after {

Content: ""

Position: absolute

Top: 0

Left: 0

Z-index:-1

Width: 400px

Height: 300px

Border: 8px solid # eee

Transform: rotate (8deg);}

Div:after {

Transform: rotate (- 8deg);}

This is the end of the content of "what are the practical skills of css pseudo-elements". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.