pseudo element in css with example

pseudo-element in CSS is a keyword added to a selector by that you can style a specific part of the selected element.

For example:-

• You can style the first letter or line of an element.
• Insert content before or after the content of an element.

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

::before - Creates a pseudo-element which is the first child of the selected element. ::before is inline by default

.classname::before{
   content:'Hello';
}

::after - Creates a pseudo-element which is the lastchild of the selected element. ::after is inline by default

.classname::after{
   content:'Hello';
}

::first-letter it applies style on the first letter of the first line.

span::first-letter{
  font-size:50px;
}

::first-line it applies on the first line of the block level element.

p::first-line{
  color:red;
}

::placeholder it applies on the input or textarea placeholder text.

input::placeholder{
  color:red;
  font-size:20px;
}