Pseudo Elements CSS

What Is Pseudo Elements In CSS? Pseudo Elements CSS

What Is Pseudo Elements In Css? Pseudo Elements Css

 

What Is Pseudo Elements In CSS? Pseudo Elements CSS
What Is Pseudo Elements In CSS? Pseudo Elements CSS

 

Being a developer you must have come across the term Pseudo Elements, these are a handful of majorly used tools of CSS. It is usually defined as a keyword combined with a selector which delineates the special state of the selected elements. 

Let’s take a further look at how these pseudo-elements are used.

Commonly used Pseudo Elements

There are many pseudo-elements available but as of now, we will be taking a look at the most commonly used pseudo-elements only now.
  • ::after
  • ::before
  • ::first-line
  • ::first-letter
  • ::selection
Now let’s take a look at each of these above-listed elements individually.

Note: Do not confuse pseudo classes with the pseudo elements. Main difference between Pseudo classes(like ‘:hover’) and Pseudo elements (like ‘::before’) is no. of colons.

1. ::after pseudo-element –

The ::after pseudo element is used to add specified content after the content of specified selected elements. The after pseudo element is also used for decorative purposes.

Example:-

2. ::before pseudo element –

Just like the ::after pseudo element , the  ::before pseudo element is also used to add specified content before the content of specified selected elements.

Example:-

3. ::first-line pseudo element –

The first-line pseudo element is used to format the first line of the selected element.It can be used to add the specific style to element or to highlight it without adding anymore tags in it.

Example:-

4. ::first-letter pseudo element –

The first-letter pseudo element is used to style the first letter of the first line of selected element, also it should not be preceded by any other elements (like: image).It is a great way to use it for the drop caps in an article.

Example:-

5. ::selection pseudo element:

Selection pseudo element applies style to the part of the document which is selected by the user (i.e : left clicking on the cursor and selecting ). In selection selector only few properties can be used which are as follows:
  • Color
  • Backgroung-color
  • Text-decoration
  • Text-shadow
  • Stroke-color
  • Stroke-width
  • Fill-color

Example:-

Leave a comment below and let us know if you have any queries.

Restaurant Website Using HTML And CSS With Source Code

Everyone’s journey starts as Beginner so if you have any type of confusion drop a comment we are here to reply & provide the best information regarding your comment. Thank you for reading!

Thank you for visiting our Blog today. Please Check out our other posts.

Written by: @OmBandiwan



Tags: , ,

Leave a Reply