A Quick Note On CSS Pseudo Elements

CSS pseudo-elements creates a new virtual element that represents a part of the element which can be manipulated like regular elements with some limitations. Pseudo-elements are only visible to users, they are not available in the document element tree i.e. they are not real elements. Pseudo-elements are mainly used to style specific parts of an element to which the pseudo-element is attached. Double colon is prepended before the pseudo-element to distinguish it from pseudo-class, but for backward compatibility we can also use single colon. Commonly used CSS pseudo-elements are:

1. ::after
2. ::before
3. ::first-letter
4. ::first-line
5. ::marker
6. ::placeholder
7. ::selection
8. ::backdrop

/* Basic Syntax */

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

::after & ::before

::after / ::before creates a child element inside a element to which the pseudo class is attached. You must specify the content property of ::after / ::before to make the pseudo element to be visible, the content property can be an empty string. Both before and after pseudo-element has default display value of inline. In the “after” pseudo element the “content” created by the pseudo element is inserted after the main element, for "before" pseudo element the content is insert before the main element.

Check the below example, the black circle is created using before and after pseudo elements.

.para {
  position: relative;
  background: #aaa;
  padding: 20px;
}

.para::before {
  content: "";
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background: #000;
  position: absolute;
  left: -50px;
  top: -50px;
}

.para::after {
  content: "";
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background: #000;
  position: absolute;
  right: -50px;
  bottom: -50px;
}

Example on Codepen

::first-letter

First-letter pseudo element can be used to style the first letter of the first line, without using any extra html tags. For the first-letter pseudo element to work as expected the element should be of type display: block;, and the first letter should not be preceded by any other contents, for example images. Not all properties as supported by first-letter pseudo element, a limited set of font properties, margin property, padding property, border property and some background properties support first-letter pseudo element.

.para::first-letter{
  color:#fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 30px;
  background: #000;
  padding: 5px 10px;
  margin-right: 5px;
}

::first-line

First line pseudo element is used to style the first line of a text in a block element. First-line pseudo element supports font, color, text and background properties only.

.para::first-line{
  color:red;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 20px;
}

Example on Codepen

::marker

Marker pseudo element helps to style the marker box of any element whose display property is set to list-item, it also helps to style the arrow of the summary elements. Marker pseudo element mainly supports color property and font properties.

<ul class="list">
  <li class="item">One</li>
  <li class="item">Two</li>
  <li class="item">Three</li>
  <li class="item">Four</li>
</ul>


.item::marker {
  color: lime;
  font-size: 25px;
}

Example on Codepen

::placeholder

Placeholder pseudo element helps to style the placeholder attributes of html input tags.

.text1::placeholder {
  font-size: 18px;
  padding-left: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #f00;
  text-decoration: underline;
}

Example on Codepen

::selection

Selection pseudo element helps to style text selected / highlighted by the user. Few properties like text shadow, background color and color properties are supported.

.para::selection{
  color:#fff;
  background: #f00;
}

Example on Codepen

::backdrop

Helps to style the backdrop area of video / dialog html
elements when viewed in full screen mode.

.video::backdrop {
  background: yellow;
  color: black;
}

Example on Codepen.io