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

This article mainly explains "what are the pseudo elements of css3 and how to use them". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the pseudo elements of css3 and how to use them?"

Css3 pseudo elements are: 1, ":: after", you can insert some content after the specified element; 2, ":: before"; 3, ":: first-letter"; 4, ":: first-line"; 5, ":: selection"; 6, ":: placeholder".

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

A pseudo-element is a keyword appended to the end of the selector through which 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.

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:

Thank you for reading, the above is the content of "what are the pseudo elements of css3 and how to use them?" after the study of this article, I believe you have a deeper understanding of what pseudo elements of css3 are and how to use them, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.