Sign up for my newsletter to receive weekly updates
Join our facebook page
What are Pseudo-Elements?
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
Style the first letter, or line, of an element
Insert content before, or after, the content of an element
The syntax of pseudo-elements:
Notice the double colon notation – ::first-line versus :first-line
The double colon replaced the single-colon notation for pseudo-elements in CSS3. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.
The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.
For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.
The ::first-line Pseudo-element
The ::first-line pseudo-element is used to add a special style to the first line of a text.
Note: The ::first-line pseudo-element can only be applied to block-level elements.
The following properties apply to the ::first-line pseudo-element:
The ::first-letter Pseudo-element
The ::first-letter pseudo-element is used to add a special style to the first letter of a text.
Note: The ::first-letter pseudo-element can only be applied to block-level elements.
Pseudo-elements and CSS Classes
Pseudo-elements can be combined with CSS classes:
Several pseudo-elements can also be combined.
CSS – The ::before Pseudo-element
The ::before pseudo-element can be used to insert some content before the content of an element.
CSS – The ::after Pseudo-element
The ::after pseudo-element can be used to insert some content after the content of an element.
CSS – The ::selection Pseudo-element
The ::selection pseudo-element matches the portion of an element that is selected by a user.
The following CSS properties can be applied to ::selection: color, background, cursor, and outline.
#LearnWebTechnologies #CSS #CSSTutorialForBeginners