CSS Tutorial for Beginners Part 27 – Pseudo Elements | Learn Web Technologies

CSS Playlist
https://www.youtube.com/playlist?list=PLjD5_XPKqoPgpyNne2IbH9c9204pF-TWe

HTML Playlist
https://www.youtube.com/playlist?list=PLjD5_XPKqoPhh7RTQ9O787szFNfhkZOxy

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

Post Author: hatefull