A guide to CSS pseudo-elements
Tags: css
Published: 2019-07-08 20:19:17

---
title: A guide to CSS pseudo-elements
published: true
tags: css
canonical_url: https://blog.logrocket.com/a-guide-to-css-pseudo-elements/
---

![](https://thepracticaldev.s3.amazonaws.com/i/8qctirey1zg3uyeng1st.png)

[Cascading Style Sheets(CSS)](https://developer.mozilla.org/en-US/docs/Web/CSS) is an independent language used to describe the presentation of web applications, this involves concepts like colors, fonts and the full control of layouts of HTML elements.

- This extends to different screens where these web applications are presented (mobile devices, tablets, even printers)
- CSS can also be used alongside any XML-centric markup language
- HTML alone provides half the power to control the content and structure, the remaining half is reserved for the look and feel and that is where styling comes in handy

In this article, you will be introduced to pseudo-elements in the cascading style sheets and practical examples of how they are used along with the compatibility.

## What are pseudo-elements in CSS?

A [CSS pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS) is a keyword added to a [CSS selector](https://www.w3schools.com/cssref/css_selectors.asp) that lets you style a specific part of the selected HTML element. They are usually denoted by two colons for example, `::first-line.`

## Pseudo-elements syntax

The general syntax for CSS pseudo-elements looks like this:

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

It looks just like normal styling statements but with the colons to indicate the specific part of the elements contained in the selector, which you want to style.

[![](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2019/06/minimal-rocket-2xA-1.png?resize=3212%2C750&ssl=1)](https://logrocket.com/signup/)

## Pseudo-elements in CSS

There are currently seven pseudo-elements in CSS, they are:

1. [::after](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
2. [::before](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
3. [::first-letter](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
4. [::first-line](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
5. [::marker](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
6. [::placeholder](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
7. [::selection](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)

There are other ones, but they are considered [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental) so in this post, the focus will be on the main seven pseudo-elements.

## Working demo

In this post, you will be introduced to each of these pseudo-elements in a simple demo folder. To follow along you will need:

- A code editor, [Visual Studio Code](https://code.visualstudio.com/) is recommended
- A live server to serve your HTML code, you can download one in VS Code. First, go to the extensions tab, a search bar will be shown alongside a list of favorite extensions and search for “live server” (it has almost 5 million downloads)

Now, create a folder, call it pseudo, and open it with VS Code. Create two files:

1. index.html: this is where our HTML code for content goes
2. main.css: this is where the styling will take place

Copy this starter code below into your index.html file:

```jsx
<!DOCTYPE html>
<html lang=”en”>
 <head>
  <meta charset=”UTF-8">
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0">
  <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
  <title>Document</title>
  <link rel=”stylesheet” type=”text/css” href=”main.css”>
 </head>
 <body>
  <p>hello world!</p>
 </body>
</html>
```

The code in bold fonts shows that we have linked the content to a stylesheet, in your case main.css. Next, copy this test style into the main.css file to test it out:

```jsx
p{
color: aqua;
}
```

If you click the ‘Go Live’ button at the footer of the VS Code application, you will be redirected to your default browser where a live remote server hosting the webpage has been fired up for you.

![](https://i1.wp.com/cdn-images-1.medium.com/max/1600/1*BIAsNxH6Elz6P_UjTGm6xg.png?ssl=1)

## ::after (:after)

The ::after creates a pseudo-element that represents the last child of a selected HTML element. It is used to add styling to this particular element in collaboration with the [CSS content](https://developer.mozilla.org/en-US/docs/Web/CSS/content) property. The syntax looks something like this:

```jsx
selector::after {
  content: "value";
} 
```

Copy the code below into your index.html file:

```jsx
<!DOCTYPE html>
<html lang=”en”>
 <head>
  <meta charset=”UTF-8">
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0">
  <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
  <title>Document</title>
  <link rel=”stylesheet” type=”text/css” href=”main.css”>
 </head>
 <body>
  <p class=”one”>This is my very first paragraph.
   This is my very first paragraph.
   This is my very first paragraph.
   This is my very first paragraph.</p>
  <p class=”three”>This is my second paragraph.</p>
  <p class=”two”>This is my last but not the least paragraph</p>
 </body>
</html>
```

Now in your main.css file copy the code below:

```jsx
.one::after {
 content: “ — 1”;
 color: blue;
}
.two::after {
 content: “ — 2”;
 color: red;
}
```

This simply adds the strings before the selected elements, in this case, the class pointing to various paragraphs and updates their colors too.

## ::before (:before)

The ::before creates a pseudo-element that represents the first child of a selected HTML element. It is inline by default and it is used to add styling to this particular element in collaboration with the [CSS content](https://developer.mozilla.org/en-US/docs/Web/CSS/content) property. The syntax looks something like this:

```jsx
selector::before {
  content: "value";
}
```

Your index.html file will stay in tact, but in your main.css file copy the code below:

```jsx
.one::before {
content: “1--”;
color: blue;
}
.two::before {
content: “2--”;
color: red;
}
```

This simply adds the strings before the selected elements, in this case the class pointing to various paragraphs and updates their colors too.

## ::first-letter (:first-letter)

The ::first-letter creates a pseudo-element that represents the first letter of the first line of a block element as long it is not coming after an image or a table.

```jsx
selector::first-letter {
  property: value;
}
```

It is, however, important to realize that the first letter of an element can be tricky to spot. Things like punctuations can be logically counted as first letters. Some languages have digraphs that are always capitalized together, like the `IJ` in Dutch. In these cases, both letters of the digraph should be matched by the ::first-letter pseudo-element.

The ::before pseudo-element in conjunction with the content property can create the first element too, so keep these in mind while debugging your CSS.

Copy the styling code below in your main.css file to see the ::first-letter in action:

```jsx
p::first-letter {
 color: red;
 font-size: 130%;
}
```

## ::first-line (:first-line)

The ::first-line creates a pseudo-element that represents the first line of a block element. Just like the first letter, the first line is also dependent on a few factors like the width of the element, the width of the document and the font size of the element. The syntax of the :first-line pseudo-element looks like this:

```jsx
selector::first-line {
  property: value;
}
```

Copy the styles below into your main.css file:

```jsx
p {
font-size: 130%;
}
p::first-line {
color: red;
font-size: 130%;
}
```

The first paragraph style will enlarge the font of the paragraphs in order to get a line out of the given string.

![](https://i2.wp.com/cdn-images-1.medium.com/max/1600/1*nPhOQrUfO3jyS9U_F9GRcg.png?ssl=1)

## ::marker

The ::marker pseudo-element selects the marker box of a list item, which typically contains a bullet or number, it is used on lists items and the summary element. The syntax looks like this:

```jsx
selector ::marker {
  property: value;
}
```

Add this list items code below to your index.html file:

```jsx
<ul>
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
</ul>
```

Copy the ::marker styles below to the main.css file to see it in action:

```jsx
ul li::marker {
  color: blue;
  font-size: 130%;
}
```

## ::placeholder

The ::placeholder pseudo-element points to the placeholder of input elements in your presentation, mostly found in forms. Most browsers, by default, apply a light gray color to placeholders. The syntax looks something like this:

```jsx
selector ::placeholder {
  property: value;
}
```

Copy this input line into your index.html file:

```jsx
<input placeholder="Type something here!">
```

Copy the styling below to the main.css file to see the changes:

```jsx
input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}
```

## ::selection

The ::selection pseudo-element applies to highlighted elements on the DOM. This is one of my favorite pseudo-elements, the syntax looks like this:

```jsx
selector ::selection {
  property: value;
}
```

There are few properties that can be used on the ::selection pseudo-element, they are color, background-color, cursor, caret-color, outline, text-decoration, text-emphasis-color and text-shadow.   
Copy the styling below into your main.css file:

```jsx
p::selection {
 background-color: red;
}
```

If you check it out in your browser, it will look like this:

![](https://i2.wp.com/cdn-images-1.medium.com/max/1600/1*wNACTCo3fN2OncmSmjagxA.gif?resize=434%2C155&ssl=1)

## Browser compatibility

Here is some useful information you might want to know about the pseudo-elements in regards to browser support.

- Every popular browser except Safari and Opera fully support the [::after pseudo-element](https://caniuse.com/#search=%3A%3Aafter)
- Every popular browser except Safari, Internet explorer 9 and Opera fully support the [::before pseudo-element](https://caniuse.com/#search=%3A%3Abefore)
- The [::marker pseudo-element](https://caniuse.com/#search=%3A%3Amarker) is supported only by Firefox browsers
- The :[:first-letter pseudo-element](https://caniuse.com/#search=%3A%3Afirst-letter) is supported by all browsers except the Safari on IOS devices
- The [::first-line pseudo-element](https://caniuse.com/#search=%3A%3Afirst-line) is fully supported by every browser, and on every screen size
- The [::placeholder pseudo-element](https://caniuse.com/#search=%3A%3Aplaceholder) is supported in all browsers except Internet Explorer
- The [::selection pseudo-element](https://caniuse.com/#search=%3A%3Aselection) is supported by all web browsers

## Conclusion

CSS is still an integral part of the modern web development process, it is vital that web developers take some time to learn the basics of CSS. Pseudo-elements in CSS will help you extend your knowledge and also give you more exciting options for your styling. Happy hacking!
* * *
## Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps
 
[![LogRocket Dashboard Free Trial Banner](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png?zoom=2&resize=730%2C412&ssl=1)](https://logrocket.com/signup/)
 
[LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
 
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
 
[Try it for free](https://logrocket.com/signup/).
* * *
The post [A guide to CSS pseudo-elements](https://blog.logrocket.com/a-guide-to-css-pseudo-elements/) appeared first on [LogRocket Blog](https://blog.logrocket.com).