What are Pseudo-Elements?
A CSS pseudo-component is utilized to style indicated parts of an element.
For model, it tends to be utilized to:
- Style the main letter, or line, of an element
- Insert content previously, or after, the substance of a component
The language structure of pseudo-elements:
The ::first-line Pseudo-element
::first-line pseudo-component is utilized to include an extraordinary style
to the main line of a text.
The following precedent arrangements the primary line of the content in all <p> elements:
text style variation: little caps;
::first-line pseudo-component must be connected to square dimension
The following properties apply to the
- font properties
- color properties
- background properties
The ::first-letter Pseudo-element
::first-letter pseudo-component is utilized to add an exceptional style to the first
letter of a text.
The following precedent configurations the main letter of the content in all <p> elements:
text dimension: xx-large;
::first-letter pseudo-component must be connected to square dimension
The following properties apply to the ::principal letter pseudo-element:
- text style properties
- shading properties
- foundation properties
- margin properties
- padding properties
- border properties
- vertical-adjust (just if "float" is "none")
Pseudo-components and CSS Classes
Pseudo-components can be joined with CSS classes:
text style size:200%;
The model above will show the main letter of sections with class="intro", in yellow and in a bigger size.
Several pseudo-components can likewise be combined.
In the accompanying model, the principal letter of a section will be yellow, in a xx-expansive text dimension. Whatever is left of the primary line will be blue, and in little tops. Whatever is left of the section will be the default text dimension and color:
text dimension: xx-large;
textual style variation: little caps;
CSS - The ::before Pseudo-element
::before pseudo-component can be utilized to embed some substance before the substance of an element.
The following model embeds a picture before the substance of each <h1> element:
CSS - The ::after Pseudo-element
::after pseudo-component can be utilized to embed some substance after the substance of an element.
The following model embeds a picture after the substance of each <h1> element:
CSS - The ::determination Pseudo-element
::selection pseudo-component coordinates the bit of a component that is
chosen by a user.
The following CSS properties can be connected to
The following model makes the chose content yellow on a green background:
All CSS Pseudo Elements
There are five pseudo components in CSS, each beginning with a twofold colon (::):
|::after||p::after||Insert something after the substance of each <p> element|
|::before||p::before||Insert something before the substance of each <p> element|
|::first-letter||p::first-letter||Selects the primary letter of each <p> element|
|::first-line||p::first-line||Selects the main line of each <p> element|
|::selection||p::selection||Selects the segment of a component that is chosen by a user|