pseudo element in css with example

6 months ago23k times

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;
}

Add Answer

Add a codeAdd Code
Remove adsremove

Latest Snippets

view all