This is used to style specified parts of an element.
Syntax: –
selector::pseudo-element { property:value; }
Ex: –
p::first-letter { color: red; }
- ::first-letter
- ::first-line
- ::selection
- ::before
- ::after
::first-letter-
This is used to add a style to the first letter of the specified selector (each). This can only be used with block-level elements.
- background properties
- font properties
- padding properties
- color properties
- margin properties
- border properties
- line-height
- text-transform
- text-decoration
- vertical-align (only if float is ‘none’)
- float
- clear
Ex: –
p::first-letter { color: red;}
::first-line-
This is used to add a style to the first line of the specified selector (each). This can only be used with block-level elements.
- background properties
- font properties
- text-decoration
- color properties
- word-spacing
- letter-spacing
- text-transform
- vertical-align
- line-height
- clear
Ex: –
p::first-line { color: red;}
::selection-
This is used to matches the portion of an element that is selected by a user then apply the CSS rule in the selected content.
- background properties
- color properties
- cursor properties
- outline properties
Ex: –
p::selection { background-color: red; }
::before-
This is used to insert something before the content of each specified selector (each). We use content property to specify the content to insert.
Ex: –
p::before { content: “ Hello World”; }
::after-
This is used to insert something after the content of each specified selector (each). We use content property to specify the content to insert.
Ex: –
p::after { content: “ Hello DevOpsSchool”; }
