CSS Pseudo-elements - Bcis Notes

CSS Pseudo-elements

Pseudo Elements: Pseudo-element in CSS is used to add style in specified parts of an element. Example: Using style before or after an element.

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

Use of Pseudo-Element

Here, some examples describe the use of pseudo-element.

1. first-line Pseudo-element: It is used to make changes to the first line of an element.

CODE:

Result:

2. The ::first-letter Pseudo-element

It is used to make changes to the first letter of an element.

CODE:

Result:

3.CSS – The ::before Pseudo-element

It is used to add some CSS property before an element when that element is called before Pseudo-element.

CODE:

Result:

4.CSS – The after Pseudo-element
The:: after pseudo-element can be used to insert some content after the content of an element.

CODE:

Result:

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

CODE:

Result:

Here is the result after the selection of areas to show the effect.