CSS pseudo-elements with examples

Guide to CSS pseudo-elements with examples | cheatsheet download

This article will introduce you to pseudo-elements in CSS and practical examples of how they make our design and styling very unique.

A CSS pseudo-element is a keyword. That can work in combination with a CSS selector which allows you to style a specific area of the selected HTML element.

Syntax

The syntax of pseudo-elements:

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

Pseudo-elements in CSS

We will discus some of psedu-elements here:

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

The ::first-letter Pseudo-element

The ::first-letter pseudo-element is used to give a text’s first letter a styling.

p::first-letter {
  color: #6f19ff;
  font-size: 35px;
}

The output will look like this. Notice the first letter.

JavaScript is a programming language

The ::first-line Pseudo-element

The ::first-line pseudo-element is used to give the first line of a text a specific style.

p::first-line{
  color: #6f19ff;
}

Here is a visual example:

The ::first-line creates a pseudo-element that represents the block element’s first line. The first line, like the first letter, is determined by a number of parameters, including the element’s width, the document’s width, and the element’s font size.

The ::before Pseudo-element

The ::before pseudo-element place content in front of an element’s content.

The following example places a “smiling face with hearts emoji” before the heading.

h3::before {
  content: "\01F970";
}

🥰 Example of ::before pseudo-element

The ::after Pseudo-element

The ::before pseudo-element place content at the end of an element’s content.

The following example places a “smiling face with hearts emoji” after the heading.

h3::after {
  content: "\01F970";
}

Example of ::after pseudo-element 🥰

The ::marker Pseudo-element

The ::marker The CSS pseudo-element selects a list item’s marker box, which usually contains a bullet or number. It works on <li> and <summary> elements.

The example of ::marker pseudo-element:

<ul>
  <li>Apple</li>
  <li>Samsung</li>
  <li>Nokia</li>
</ul>
ul li::marker {
  color: #6f19ff;
  font-size: 1.5em;
}

The output:

  • Apple
  • Samsung
  • Nokia

The ::placeholder Pseudo-element

The placeholder text in an input or textarea element is represented by the ::placeholder CSS pseudo-element.

::placeholder {
  color: #6f19ff;
  font-size: 1.5em;
}
<input placeholder="Enter Email">

The output:

The ::selection Pseudo-element

This CSS pseudo-element is useful in styling the user-highlighted part of a document. For example, a user may select a portion of text to copy. This select text is styled with the ::selection pseudo-element.

p::selection {
  color: #6f19ff;
  background: #ddd;
}

To test this example select a text on this page.


Download CSS pseudo-elements with the examples Cheatsheet

References

Learn more about these CSS Pseudo-elements: mozilla.org

Add comment