A deep understanding of pseudo elements and a deep understanding of pseudo elements

A deep understanding of pseudo elements and a deep understanding of pseudo elements
Directory [1] Definition [2] usage first-letter first-line before after selection [3] Highlights [4] DEMO first-word sinking nail effect image superposition effect Definition

Pseudo elements are disguised as elements but not elements, which are related to the generated content. The generated content mainly refers to the content created by the browser, rather than the flag or content. The generated content is mainly implemented by the following pseudo elements: before AND: after. Of course, the pseudo elements include: first-line,: first-letter, and: selection.

 

Usage: first-letter (not supported by IE6-browser)

Specifies the style of the first letter of an element.

[NOTE 1] The style should be applied with the first letter for all leading punctuation marks

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

div:first-letter{color: red;}

: First-line (not supported by IE6-browser)

Set the style of the first line of text in the element

[Note] It can only be associated with block-level elements

div:first-line{color: red;}    

: Before (IE7-not supported by browsers)

Insert the generated content at the beginning of the element content

[Note] by default, this pseudo element is an in-Row Element and inherits the attributes that can be inherited by the element.

Div: before {content: "prefix "}

: After (IE7-not supported by browsers)

Insert the generated content at the end of the element content

[Note] by default, this pseudo element is an in-Row Element and inherits the attributes that can be inherited by the element.

Div: after {content: "suffix "}

: Selection (not supported by IE 8-browser)

Match selected parts

[NOTE 1] add-moz-prefix to firefox

[NOTE 2] only double colons are supported

[NOTE 3] only two styles are supported: Color and background color.

div::selection{color: red;}

 

Key [content attributes]

The content attribute is applied to the before and after pseudo elements.

Content: normal; (default) content: <string >|< uri> | attr (<identifier>)

[1] <string> the content is displayed as is, even if it contains a tag.

[NOTE 1] to generate A line feed, use \

[NOTE 2] If a long string needs to be split into multiple lines, escape the line break with the \ symbol.

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

[2] <uri>

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

[3] attr (<identifier>)

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

<Supplement> [quotes attributes]

Manage quotation marks

Single quotation marks-> \ 2018 single quotation marks-> \ 2018 double quotation marks-> \ 201C double quotation marks-> \ 201D

Quotes: 'C C' 'd d' 2018 '2019'; // the first value defines the start quotation marks (open-quote) for the outermost layer ), the second string defines the outermost ending quotation marks (close-quote), the third value defines the outer starting quotation marks, and the fourth value defines the outer ending quotation marks, the fifth value defines the second outer start quotation mark, and the sixth value defines the second outer end quotation mark ......

[4] open-quote | close-quote

<style>div{    display: inline-block;    quotes: '201C' '201D' '2018' '2019' '201C' '201D';}div:before{    content: open-quote;}div:after{    content: no-close-quote;}</style>

<Div> outermost <div> secondary outer <div> innermost layer </div>

[5] counter

For more information about counter attribute values, see CSS counters.

 

DEMO first word sinking

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

 

Nail Effect

<Style>/* use the before pseudo element to draw a circle */. box: before {display: block; content: "nail"; height: 50px; width: 50px; border-radius: 50%; background-color: black; color: white; font-weight: bold; text-align: center; line-height: 50px;}/* use the after pseudo element to draw a triangle */. box: after {display: block; content: ""; width: 0; height: 0; border: 25px solid transparent; border-top: 50px solid black; margin-top: -20px ;}</style>

<div class="box"></div>

 

Image superposition Effect

<style>body{    margin: 0;}    .box{    position:relative;    margin: 30px auto 0;    width: 300px;}.box-img{    position: absolute;    z-index:1;    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);}</style>

<Div class = "box">  </div>