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.

             

 

You may also like: CSS Combinators

 

Leave a Reply

Your email address will not be published. Required fields are marked *