CSS tutorial series: Pseudo elements
Tags: beginners, webdev, tutorial, css
Published: 2023-01-31 10:40:58

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](https://dev.to/fullstackjo/css-tutorial-series-css-pseudo-classes-40j4).

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

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

```
**Notice the double colon before the pseudo element.**

Let's explore an example: 

```HTML
<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.

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

![first-letter pseudo element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gfpz5o364m5bnpynybm6.png)

## ::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>`.

```HTML
<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>
```

```CSS
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");
}

```

![before and after pseudo element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aq8h9efk8grknjlmhkb3.png)

## 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.

```HTML
<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>

```

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

```


![first line pseudo element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phf9h60in01sb42gtv6x.png)

### ::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.

```HTML
<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>
```

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

```

![selection pseudo element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6alf2dk56509umk2u1zy.png)

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

```HTML
  <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>

```

```CSS
ul ::marker {
  color: green;
}

ol ::marker {
  color: red;
}

```

![marker pseudo element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpv8e5juiezgkb5szbg8.png)
### placeholder 
The `::placeholder` pseudo element is used to style the `placeholder` attribute of the `<input>` element. 

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

```

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

![placeholder pseudo element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7u0icoo516oj3pws3tf.png)