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

Pseudo elements are disguised as elements as the name implies, but not elements, which is related to the generated content. Generated content mainly refers to content created by the browser, rather than represented by flags or content. The generated content is mainly realized by: before and: after pseudo elements, of course, pseudo elements also include: first-line,:first-letter and:: selection

Usage: first-letter

Specify the style of the first letter of an element

[note 1] all leading punctuation marks should apply the style together with the first letter

[note 2] can only be associated with block-level elements

[note 3] IE6- browsers support it only if there is a space between the selector section and the opening brace. Because there are connectors in first-letter

Div:first-letter {color: red;}: first-line

Style the first line of text in the element

[note 1] can only be associated with block-level elements

[note 2] IE6- browsers support it only if there is a space between the selector section and the opening brace. Because there are connectors in first-line

Div:first-line {color: red;}

Before (not supported by IE7- browsers)

Insert the generated content at the beginning of the element content

[note] by default, this pseudo element is an inline element and inherits the inheritable attributes of the element; it must be declared in the IE7- browser! DOCTYPE, otherwise it will not work.

Div:before {content: "prefix"}: after (not supported by IE7- browsers)

Insert the generated content at the end of the element content

[note] by default, this pseudo element is an inline element and inherits the inheritable attributes of the element; it must be declared in the IE7- browser! DOCTYPE, otherwise it will not work.

Div:after {content: "suffix"}

:: selection (not supported by IE8- browser)

Match the part selected by the user

[note 1] firefox browser needs to add-moz- prefix

[note 2] only double colons are supported

[note 3] only two styles of color and background color are supported

Div::selection {color: red;}

Highlight

[content attribute]

The content attribute is applied to before and after pseudo elements

Content:normal; (default) content: | | attr ()

[1] the contents will be displayed as is, even if they contain some kind of tag.

[note 1] if you want to have a newline in the generated content, you need to use\ A

[note 2] if a long string needs to be split into multiple lines, it needs to be escaped with a newline character.

Div:before {content: "first paragraph\ second paragraph";} div:after {content: "\ A suffix";}

[2]

Div:before {content: url ("arrow.gif");}

[3] attr ()

Div:before {content: attr (data-before);}

[quotes attribute]

Manage quotation marks

Single quotation marks before->\ 2018 after single quotation marks->\ 2018 front double quotes->\ 201C after double quotes->\ 201D quotes / / the first value defines the outermost start quotation mark (open-quote), the second string defines the outermost end quotation mark (close-quote), the third value defines the second outer layer start quotation mark, the fourth value defines the second outer layer end quotation mark, the fifth value defines the second outer layer start quotation mark, the sixth value defines the second outer layer end quotation mark.

[4] open-quote | close-quote

Div {display: inline-block; quotes: '201C' 201D` 2018' 20119' '201C'' 201During;} div:before {content: open-quote;} div:after {content: no-close-quote;}

Outermost layer, secondary outer layer, innermost layer.

[5] counter

For more information about counter attribute values, see in-depth understanding of CSS counters.

Drop DEMO caption

Div {width: 200px; border: 1px solid black; text-indent: 0.5em;} div:first-letter {font-size: 30px; float: left;}

Nail effect

-radius:%-top:-

Picture overlay effect

Body {margin: 0;} .box {position:relative; margin: 30px auto 0; width: 300px;} .box-img {position: absolute; z indexvis1; border: 5px solid gray;} .box: before,.box:after {content: ""; position: absolute; background-color: # D5B07C; width: 300px; height: 200px; border: 5px solid gray } .box: before {left:-10px; top: 0; transform: rotate (- 5deg);} .box: after {top: 4px; left: 0; transform: rotate (4deg);}

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.