Home > Article > Web Front-end > what are css3 pseudo elements
In CSS3, pseudo-element is a keyword appended to the end of the selector. Its literal meaning is "fake element" or "disguise element", which is actually a virtual element; pseudo-element is mainly used for Create some elements that are not in the DOM tree and add styles to them.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
css3 pseudo-element
The literal meaning of pseudo-element is "fake element" or "disguise element". In fact, it can be understood this way. Pseudo elements are actually virtual elements. Elements that do not exist (in code form), and you cannot find them in the document, so pseudo elements are virtual elements.
Pseudo element is a keyword appended to the end of the selector. It is mainly used to create some 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 resorting to the element's ID or class attributes. For example, through pseudo-elements you can set the style of the first letter in a paragraph, or insert some content before or after the element, etc.
In CSS1 and CSS2, the use of pseudo-elements is the same as pseudo-classes, and a colon :
is connected to the selector. However, in CSS3, the use of single colon for pseudo elements was changed to double colon ::
to distinguish pseudo classes and pseudo elements. Therefore, it is recommended to use double colons instead of single colons when using pseudo-elements.
selector::pseudo-element { property: value; }
Among them, 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 follow the selector. According to the latest W3C specification, you should use double colon ::
instead of single colon :
when defining pseudo-elements to distinguish pseudo-classes and pseudo-elements. However, since the old version of the W3C specification did not make a special distinction, most browsers currently support both single colon and double colon methods to define pseudo-elements.
CSS provides a series of pseudo-elements, as shown in the following table:
Pseudo-elements | Examples | Example description |
---|---|---|
::after | p::after | Insert content after each element |
::before | p::before | Insert content before each element |
: :first-letter | p::first-letter | Matches the first letter of the content in each element |
p::first-line | Match the first line of content in each | |
p::selection | Match the part of the element selected by the user | |
input::placeholder | Match the placeholder attribute of each form input box (such as ) |
The above is the detailed content of what are css3 pseudo elements. For more information, please follow other related articles on the PHP Chinese website!