CSS tutorial series: Pseudo elements

In This post we're going to talk about pseudo-elements. We've previously explained what are CSS pseudo-classes which are used to specify the state of a selected elements. CSS tutorial series: pseudo-classes.

What is a pseudo-element?

A pseudo-element is used to style a specific part of an element. It is defined like so:

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

Notice the double colon before the pseudo element.

Let's explore an example:

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, ipsam?</p>

Let's say we want the first letter of this paragraph to be bigger and red. We use the pseudo-element ::first-letter to make these changes.

 p::first-letter {
   color:red;
   font-size: 2rem;
 }

::before & ::after

These pseudo-elements add content before and after a selected element using the property content. You can add a string of text or even an image which will be rendered as it is, meaning with its default width and height. ::before or ::after have no effect on <img /> or <video> or <input>.

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti quia recusandae velit quae reiciendis molestiae itaque alias voluptatum eaque quibusdam qui id, aut ducimus voluptates quis odio enim minus pariatur ab non. Mollitia totam quos dolore quas. Quas, molestiae. Officiis sapiente ab veritatis nisi cupiditate doloremque debitis quam optio error.</p>

p::before {
  content: "=>";
  font-size: 4rem;
  color: red;
}

p::after {
  content: url("https://images.pexels.com/photos/9898727/pexels-photo-9898727.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load");
}

available properties for pseudo-elements

Pseudo-element	Allowed Properties
::first-letter and ::first-line	color, background-color, border, float, font-size, font-weight, text-decoration, word-spacing

::first-line

This pseudo-element styles the first line of a block element or a display of block such as a paragraph.

<p>
 Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
 Sit libero explicabo excepturi sed repellat. Magni, 
 aspernatur nisi modi tempore laudantium nobis accusamus 
 dolorum maiores ipsum cupiditate ullam. Ratione, a ab, 
 minima dolor consequuntur, porro rem accusamus eaque fugiat 
 nobis provident dignissimos eveniet pariatur. Quod, 
 laboriosam molestiae. Dolor vero veniam ea.
</p>

p::first-line{
  color: purple;
  text-transform: uppercase;
  font-size:1.5em;
  background-color: yellow;
}

::backdrop

This pseudo-element is used with element that are displayed in fullscreen such as <dialog> or <video> element to style the space between the element and the rest of the page using the background property which will be immediately visible underneath the element.

::selection

When a user select a portion of a text the ::selection pseudo-element will match with it and allow you to style that chunk of text by applying the defined CSS properties.

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti quia recusandae velit quae reiciendis molestiae itaque alias voluptatum eaque quibusdam qui id, aut ducimus voluptates quis odio enim minus pariatur ab non. Mollitia totam quos dolore quas. Quas, molestiae. Officiis sapiente ab veritatis nisi cupiditate doloremque debitis quam optio error.</p>

p::selection {
  color: yellow;
  background-color: red;
}

::marker

This pseudo-element is used to style the markers of an ordered and unordered list (bullets or numbers).

  <ul>
    <li>Lorem, ipsum.</li>
    <li>Lorem ipsum dolor sit.</li>
    <li>Lorem, ipsum dolor.</li>
  </ul>

<ol>
    <li>Lorem, ipsum.</li>
    <li>Lorem ipsum dolor sit.</li>
    <li>Lorem, ipsum dolor.</li>
  </ol>

ul ::marker {
  color: green;
}

ol ::marker {
  color: red;
}

placeholder

The ::placeholder pseudo element is used to style the placeholder attribute of the <input> element.

<input type="email" placeholder="Enter your email">

input::placeholder {
  color: red;
  font-size: 1.5rem;
}