CSS tutorial

Pseudo-elements

A CSS pseudo-element is used to style specified parts of an element.

namedescription
::afterCreates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
::beforeCreates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default. 
/* Let page has fixed top navigation bar
and defined anchors for h2 elements.
When user will jump to selected h2, h2 element can be 
behind navigation. */
article h2[id]:before {
 display: block;
  /* equal to the navigation bar */
  height: 50px;   
  /* negative margin equal to the navigation bar */  
  margin-top: -50px;  
  visibility: hidden;
  content: "";
}
::first-letterApplies styles to the first letter of the first line of a block-level element, but only when not preceded by other content such as images or inline tables. 
/* Create first letter of
paragraph bigger */
p::first-letter {
  font-size: 130%;
}
::first-lineApplies styles to the first line of a block-level element.
::selectionApplies styles to the part of a document that has been highlighted by the user. Only followed css properties can be changed:
  • color
  • background-color
  • cursor
  • caret-color
  • outline and its longhands
  • text-decoration and its associated properties
  • text-emphasis-color
  • text-shadow