CSS Properties

This is used to style specified parts of an element.

Syntax:

selector::pseudo-element {
property:value;
}

Types of Pseudo Element

• ::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
- properties
- color properties
- margin properties
- border properties
- line-height
- text-transform
- text-decoration
- vertical-align (only if float is 'none')
- float
- clear

Example:

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

Example:

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

Example:

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.

Example:

p::before {
content: “ Geekyshows Says”;
}

::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.

Example:

p::after {
content: “ By Geekyshows”;
}