Pseudo Elements

This lists all available pseudo elements (omitting some that are obscured, experimental, or unlikely to be used).

Texts

`::before`

Inserts content before an element (it's inline by default).

`::after`

Inserts content after an element (it's inline by default).

<div id="after-example">
  <p>One two three</p>
</div>

<div id="after-example">
  <p>One two three</p>
</div>

#after-example p::after {
  content: '<- BORING';
  color: red;
}

#after-example p::after {
  content: '<- BORING';
  color: red;
}

| LIVE PREVIEW

One two three

`::first-letter`

Styles the first letter of an element's text content.

If the content is modified by ::before, then the "first letter" could be in the content of ::before
If there's other content before the first letter (like <img>), the first letter won't get the style

<div id="first-letter-example">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in ullamcorper nisl, eget congue ligula. Sed elit lacus, interdum eget leo nec, pulvinar maximus libero. Aliquam vehicula, ipsum eget tincidunt lobortis, sem nisi facilisis felis, fermentum dapibus est urna ut purus.</p>
</div>

<div id="first-letter-example">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in ullamcorper nisl, eget congue ligula. Sed elit lacus, interdum eget leo nec, pulvinar maximus libero. Aliquam vehicula, ipsum eget tincidunt lobortis, sem nisi facilisis felis, fermentum dapibus est urna ut purus.</p>
</div>

#first-letter-example p::first-letter {
  font-size: 300%;
  float: left;
  padding: 5px 10px;
}

#first-letter-example p::first-letter {
  font-size: 300%;
  float: left;
  padding: 5px 10px;
}

| LIVE PREVIEW

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in ullamcorper nisl, eget congue ligula. Sed elit lacus, interdum eget leo nec, pulvinar maximus libero. Aliquam vehicula, ipsum eget tincidunt lobortis, sem nisi facilisis felis, fermentum dapibus est urna ut purus.

`::first-line`

Styles the first line of an element's text content.

<div id="first-line-example">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in ullamcorper nisl, eget congue ligula. Sed elit lacus, interdum eget leo nec, pulvinar maximus libero. Aliquam vehicula, ipsum eget tincidunt lobortis, sem nisi facilisis felis, fermentum dapibus est urna ut purus.</p>
</div>

<div id="first-line-example">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in ullamcorper nisl, eget congue ligula. Sed elit lacus, interdum eget leo nec, pulvinar maximus libero. Aliquam vehicula, ipsum eget tincidunt lobortis, sem nisi facilisis felis, fermentum dapibus est urna ut purus.</p>
</div>

#first-line-example p::first-line {
  color: red;
}

#first-line-example p::first-line {
  color: red;
}

| LIVE PREVIEW

Lists

`::marker`

Styles the bullet/marker of a "list item" (basically anything that has display: list-item, like <li> or <summary>).

<ul id="marker-example">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul id="marker-example">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

#marker-example ::marker {
  color: red;
}

#marker-example ::marker {
  color: red;
}

| LIVE PREVIEW

One
Two
Three

Forms

`::file-selector-button`

Styles the button part of an <input type="file">.

(If you use input[type="file"], it will also style other parts of the file input, like the current selected filename.)

<div id="file-selector-button-example">
  <input type="file">
</div>

<div id="file-selector-button-example">
  <input type="file">
</div>

#file-selector-button-example ::file-selector-button {
  padding: 10px;
  background-color: gold;
}

#file-selector-button-example ::file-selector-button {
  padding: 10px;
  background-color: gold;
}

| LIVE PREVIEW

`::placeholder`

Styles the placeholder of an <input>.

<div id="placeholder-example">
  <input placeholder="Hello from the other side!">
</div>

<div id="placeholder-example">
  <input placeholder="Hello from the other side!">
</div>

#placeholder-example input::placeholder {
  color: blue;
  font-style: italic;
}

#placeholder-example input::placeholder {
  color: blue;
  font-style: italic;
}

| LIVE PREVIEW

UI

`::backdrop`

Sets the "background" of an element being presented full-screen.

<!-- https://mdn.github.io/css-examples/backdrop/index.html -->
<p>Try pressing fullscreen. You won't see the red background if your screen size matches the size of the poster/thumbnail or the video.</p>
<video controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
Sorry, your browser doesn't support embedded videos.  Time to upgrade!
</video>

<!-- https://mdn.github.io/css-examples/backdrop/index.html -->
<p>Try pressing fullscreen. You won't see the red background if your screen size matches the size of the poster/thumbnail or the video.</p>
<video controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
Sorry, your browser doesn't support embedded videos.  Time to upgrade!
</video>

video::backdrop {
  background-color: red;
}

video::backdrop {
  background-color: red;
}

| LIVE PREVIEW

Try pressing fullscreen. You won't see the red background if your screen size matches the size of the poster/thumbnail or the video.

`::selection`

Styles part of the document that has being highlighted.

<div id="selection-example">
  <p>Try selecting this text!</p>
</div>

<div id="selection-example">
  <p>Try selecting this text!</p>
</div>

#selection-example ::selection {
  background-color: green;
  color: yellow;
}

#selection-example ::selection {
  background-color: green;
  color: yellow;
}

| LIVE PREVIEW

Try selecting this text!

Omitted

I decided to not include the following (because they're super obscured, or still experimental at the time of writing). You can read more about them on MDN.

Text Fragments:

::grammar-error
::spelling-error
::target-text

Subtitles:

::cue
::cue-region

Shadow DOM:

::part(...)
::slotted(...)

References

Pseudo Elements (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
::marker (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/::marker