CSS Pseudo-elements (pseudo-elements)

CSS Pseudo-elements pseudo-elements are a keyword attached to the end of a selector that allows you to modify the style of the specific part of the selected element. Note: Compared to pseudo-elements, pseudo-classes (pseudo-classes) can change the style of elements based on their state.

CSS pseudo-elements are a method of styling document elements that are not defined by the position in the document tree.

What is a pseudo-element

CSS pseudo-elements allow you to set the styles of an element or part of an element without adding any ID or class to it. This is very useful in cases where you want to set the style of the first letter of a paragraph to create a sinking first letter effect, or to insert some content before or after an element through a stylesheet, etc.

CSS3 The new double colon (::) syntax for pseudo-elements was introduced to distinguish pseudo-elements from pseudo-classes. The new syntax for pseudo-elements can be given as follows:

These are the most commonly used pseudo-elements:

::first-line first line pseudo-element

This::first-The line pseudo-element applies special styles to the first line of text.

The following example sets the style rules for the format of the first line of text in the paragraph. The length of the first line depends on the size of the browser window or the containing element.

p::first-line {
　　　　color: #ff0000;
　　　　font-variant: small-caps;
}

:: first-letter pseudo-element

::first-The letter pseudo-element is used to add special styles to the first letter of the first line of text. The following example sets the style rules for the first letter format of the text paragraph and creates an effect similar to sinking the first letter.

p::first-letter　{
　　　　color: #ff0000;
　　　　font-size:　xx-large;
}

:: before and :: after pseudo-elements

::before and ::after pseudo-elements can be used to insert generated content before or after the content of an element. content When CSS properties are combined with these pseudo-elements, the generated content is inserted.

This is very useful for further decorating rich content elements that should not belong to the actual markup of the page. You can use these pseudo-elements to insert regular strings or embed objects (such as images) and other resources.

h1::before　{
　　　　content:　url("images/marker-left.gif");
}
h1::after　{
　　　　content:　url("images/marker-right.gif");
}

Pseudo-element and CSS Class

Generally, we only need to use these pseudo-elements to set the text of a paragraph or otherBlock-levelElement Styles. There, declaring a class for a pseudo-element takes effect. Pseudo-elements can be combined withCSS ClassCombining them to produce effects, especially for elements with the class.

The style rules in the following examples will display the first letter of all paragraphs with class="article" in green, with a size of xx-large。

p.article::first-letter　{
　　　　color:　#00ff00;
　　　　font-size:　xx-large;
}