What is a CSS pseudo-element? CSS pseudo-element usage explained

What is a pseudo-element

A pseudo-element represents a child element of an element. Although this child element is logically present, it does not actually exist in the document tree.

Because the pseudo-element is not in the document tree, it is not possible to grab the pseudo-element through JS, nor to bind events to it.

Grammar

The pseudo-element to :: begin with.

In CSS1 and CSS2, pseudo-elements are the same as pseudo-classes, with the : beginning. However, in CSS3, the pseudo :: -elements are prefaced to distinguish them from pseudo-classes.

IE8 not supported :: . So if you want to be compatible with IE8, use only : .

Common Pseudo-elements

:: Before

Inserts a child element before the contents of the current element. The inserted element is an inline element.

It is important to note that when using:: Before, you must use content to specify the contents of the child elements.
For example:

. element::before {    content: "Note:"; /* String */}.element::before {    content:attr (title);/* The title property of the element */}.element::before {    Content:url (path/to/ Image.png); /* A picture */}.element::before {    content: "\201c";/* one character of Unicode escape */}

See here for a more detailed introduction

:: After

Inserts a child element after the contents of the current element.
Other and:: Before similar.

:: First-line

Selects the first row of the current element.
It is important to note that it is only used for block-level elements [Note 1].

To:: First-line only use the following style

• Font:font, Font-style, Font-variant, Font-weight, Font-size, Line-height and font-family. Background:background, Background-color, Background-image, Background-position, Background-repeat, Background-size and Background-attachmenttext-decoration, Text-transform, letter-spacing and word-spacing

Therefore, to:: First-line using margin and padding is not valid.

See here for a more detailed introduction.

:: First-letter

Select the first letter.
See here for a more detailed introduction.

:: Selection

Select the text that is selected in the current element.

Selection.png

Yes: selection can only use color, Background-color and Text-shadow properties.

When to use pseudo-elements

The purpose of HTML tags is to display content information. Pseudo-elements are used for non-content information.

The specific usage scenarios are icons and clear float.

The so-called non-content information refers to some information that modifies the content.

For example, the icon to the left of the login button is a description of the login, non-content information.

Login button. png

For example, a small red box icon indicates that clicking on the left link will open in a new window. is also non-content information.

Outer chain. png

Demos

• Those CSS hypocrites elements can help you do the 10 effects

• CSS drawing based on a single p

Note

1. Block-level elements refer to the value of display as block, Inline-block, Table-cell, table-caption, or List-item.

"Recommended"

1. Free CSS Online video tutorial

2. CSS Online Manual

3. php.cn Lonely Nine-base (2)-css video tutorial