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

What this article shares with you is about what the pseudo elements of css3 are. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

In css3, a pseudo element is a keyword appended to the end of a selector, which literally means "fake element" or "camouflage element", which is actually a virtual element; pseudo elements are mainly used to create elements that are not in the DOM tree and add styles to them.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Css3 pseudo element

Pseudo-element literally means "false element" or "camouflage element". In fact, it can also be understood that pseudo elements are actually virtual elements, elements that do not exist (code form), you do not find them in the document, so pseudo elements are virtual elements.

Pseudo element is a keyword appended to the end of the selector and is mainly used to create elements that are not in the DOM tree and add styles to them.

With pseudo elements, you can define styles for specific parts of the selected element without the help of the ID or class attributes of the element. For example, with pseudo elements, you can style the first letter in a paragraph, or insert something before or after the element, and so on.

In CSS1 and CSS2, pseudo elements are used in the same way as pseudo classes, with a colon: connected to the selector. However, in CSS3, the use of pseudo-element single colons is changed to use double colons:: to distinguish between pseudo-classes and pseudo-elements. Therefore, it is recommended that you use double colons instead of single colons when using pseudo elements.

Selector::pseudo-element {property: value;}

Where selector is the selector, pseudo-element is the name of the pseudo element, property is the attribute in CSS, and value is the value corresponding to the attribute.

Note: only one pseudo element can be used in a selector, and the pseudo element must immediately follow the selector. According to the latest W3C specification, you should use a double colon:: instead of a single colon: when defining pseudo elements to distinguish between pseudo classes and pseudo elements. However, because the old version of the W3C specification does not make a special distinction, the vast majority of browsers support both single and double colons to define pseudo elements.

A series of pseudo elements are provided in CSS, as shown in the following table:

Pseudo-element example description:: afterp::after in each

Insert content after the element:: beforep::before in each

Element:: first-letterp::first-letter matches each

The first letter of the content in the element:: first-linep::first-line matches each

The first line of the content in the element:: selectionp::selection matches the element part selected by the user:: placeholderinput::placeholder matches the placeholder attribute of each form input box (for example)

1.:: after

Pseudo-element:: after can insert some content after the specified element, the content attribute needs to be used in:: after to define the content to be appended, and the content attribute must be defined in:: after to take effect (the value of the content attribute can be defined as empty when there is no content to insert).

The following is an example to demonstrate the use of the pseudo element:: after:

P.one::after {content: "; display: inline-block; width: 50px; height: 10px; background: blue;} p.two::after {content:" content to be inserted "; color: red; font-size: 6px } p.three::after {content: url ('. / smiley.gif'); position: relative; top: 8px;} pseudo element:: after

Pseudo element:: after

Pseudo element:: after

The running result is shown in the following figure:

2.:: before

Pseudo element:: before can insert something in front of a specified element. Similar to:: after, the content attribute needs to be used in:: before to define the content to be appended, and the content attribute must be defined in:: before to take effect (you can define the value of the content attribute as empty "when there is nothing to insert).

The following is an example to demonstrate the use of the pseudo element:: before:

P.one::before {content: "; display: inline-block; width: 50px; height: 10px; background: blue;} p.two::before {content:" content to be inserted "; color: red; font-size: 6px } p.three::before {content: url ('. / smiley.gif'); position: relative; top: 8px;} pseudo element:: before

Pseudo element:: before

Pseudo element:: before

The running result is shown in the following figure:

3.:: first-letter

Pseudo element:: first-letter is used to style the first character of the content in a specified element, and is usually used to create the drop cap effect with the font-size and float attributes. It is important to note that the pseudo element:: first-letter can only be used for block-level elements, and inline elements need to convert it to block-level elements if they want to use it.

Here is an example to demonstrate the use of the pseudo element:: first-letter:

P::first-letter {font-size: 2em; color: blue;}

Pseudo element:: first-letter

The running result is shown in the following figure:

4.:: first-line

Pseudo-element:: first-line is used to style the first line of content in the specified element, similar to:: first-letter, pseudo-element:: first-line can only be used for block-level elements, in-line elements want to use the pseudo-element, you need to convert it to a block-level element.

Here is an example to demonstrate the use of the pseudo element:: first-line:

P::first-line {font-size: 1.5mm; color: blue; font-weight: bold;}

Pseudo-element:: first-line is used to style the first line of content in the specified element, similar to:: first-letter, pseudo-element:: first-line can only be used for block-level elements, in-line elements want to use the pseudo-element, you need to convert it to a block-level element.

The running result is shown in the following figure:

5.:: selection

Pseudo element:: selection is used to set the style when the object is selected. It should be noted that the pseudo element:: selection can only define attributes such as color, background, cursor, outline and text-shadow when the element is selected (IE11 does not yet support defining this attribute).

Here is an example to demonstrate the use of the pseudo element:: selection:

P::selection {color: red; background-color: # CCC;}

Pseudo element:: selection is used to set the style when the object is selected. It should be noted that the pseudo element:: selection can only define attributes such as color, background, cursor, outline and text-shadow when the element is selected (IE11 does not yet support defining this attribute).

The running result is shown in the following figure:

6.:: placeholder

Pseudo element:: placeholder is used to set the placeholder text of the form element (the text set through the placeholder attribute of HTML). The sample code is as follows:

Input.text::placeholder {color: red; background-color: # CCC;} does not use pseudo element:: placeholder

Effect of using pseudo element:: placeholder

The running result is shown in the following figure:

The above is what the pseudo elements of css3 are, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

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.