Pseudo elements: A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to: ->Style the first letter, or line of an element ->Insert content before, or after, the content of an element 

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
Pseudo classes A pseudo-class is used to define a special state of an element. For example, it can be used to: ->Style an element when a user mouses over it ->Style visited and unvisited links differently ->Style an element when it gets focus 

* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}