CSS Tutorial for Beginners Part 27 - Pseudo Elements | Learn Web Technologies
CSS Playlist
• CSS Tutorial for Beginners
HTML Playlist
• Html tutorial for beginners
Sign up for my newsletter to receive weekly updates
http://bit.ly/2RRFktj
Join our facebook page
bit.ly/2OKQYV7
CSS Pseudo-elements
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
Syntax
The syntax of pseudo-elements:
selector::pseudo-element {
property:value;
}
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:
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
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:
Multiple Pseudo-elements
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