staticdata.dev
Menu
Datasets About Contact

CSS Pseudo-Elements

30 standard CSS pseudo-elements sourced from MDN Web Docs (as of October 2026), covering cosmetic content generation (::before, ::after), text decoration (::first-letter, ::first-line, ::selection), form controls (::placeholder, ::file-selector-button), shadow DOM (::part, ::slotted), customizable select (::picker(), ::checkmark), scroll markers and buttons, and modern APIs including View Transitions and the Custom Highlight API.

v1.0.0 MIT 30 records Updated 2026-10-05 stable Source:  MDN Web Docs — Pseudo-elements

Quick fetch

Stable URL. CORS-enabled. No auth.

bash
curl https://staticdata.dev/v1/css-pseudo-elements.json

Or use as a typed import: import { cssPseudoElements } from "https://staticdata.dev/v1/css-pseudo-elements.ts"

Formats

  • JSON 5.7 KB

    /v1/css-pseudo-elements.json

    Open

    min: 5.2 KB · /v1/css-pseudo-elements.min.json

  • CSV 4.4 KB

    /v1/css-pseudo-elements.csv

    Open
  • TypeScript 5.9 KB

    /v1/css-pseudo-elements.ts

    export const cssPseudoElements

    type PseudoElement = (typeof cssPseudoElements)[number]

    Open

Schema

Each record in the dataset has the following shape.

Schema
Field Type Description Example
selector string CSS pseudo-element selector token ::before
description string Plain-language description of the pseudo-element Creates a pseudo-element that is the first child of the selected element. Often used to add cosmetic content with the content property.

Preview

First 10 records.

Data preview
selectordescription
::afterCreates a pseudo-element that is the last child of the selected element. Often used to add cosmetic content with the content property.
::backdropA box rendered immediately below a top-layer element (such as a fullscreen element or dialog), filling the entire viewport.
::beforeCreates a pseudo-element that is the first child of the selected element. Often used to add cosmetic content with the content property.
::checkmarkRepresents the checkmark shown next to the selected <option> in a customizable <select> element (appearance: base-select).
::columnRepresents an individual column box of a multi-column container, used to generate scroll markers for each column.
::cueMatches WebVTT cues within a selected element. Can be used to style captions and other cues in media with VTT tracks.
::cue-regionMatches WebVTT cue regions within a selected element, allowing styling of entire regions of VTT captions.
::details-contentRepresents the expandable/collapsible content of a <details> element (everything except the <summary>).
::file-selector-buttonRepresents the button of an <input> element with type="file".
::first-letterApplies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).

Showing 10 of 30. View full data:  JSON · CSV

Fetch examples

Drop-in snippets in five languages.

curl
curl -sSL https://staticdata.dev/v1/css-pseudo-elements.json | jq '.[0]'
JavaScript
import type { PseudoElement } from "https://staticdata.dev/v1/css-pseudo-elements.ts";

const res = await fetch("https://staticdata.dev/v1/css-pseudo-elements.min.json");
if (!res.ok) throw new Error(`Fetch failed: ${res.status}`);
const cssPseudoElements: PseudoElement[] = await res.json();
console.log(cssPseudoElements[0]);
Python
import urllib.request, json

with urllib.request.urlopen("https://staticdata.dev/v1/css-pseudo-elements.min.json") as r:
    cssPseudoElements = json.load(r)

print(cssPseudoElements[0])
Go
package main

import (
	"encoding/json"
	"fmt"
	"net/http"
)

func main() {
	resp, err := http.Get("https://staticdata.dev/v1/css-pseudo-elements.min.json")
	if err != nil { panic(err) }
	defer resp.Body.Close()

	var data []map[string]any
	if err := json.NewDecoder(resp.Body).Decode(&data); err != nil {
		panic(err)
	}
	fmt.Println(data[0])
}
Rust
use serde_json::Value;

fn main() -> Result<(), Box<dyn std::error::Error>> {
    let body = ureq::get("https://staticdata.dev/v1/css-pseudo-elements.min.json").call()?.into_string()?;
    let data: Vec<Value> = serde_json::from_str(&body)?;
    println!("{:?}", data.first());
    Ok(())
}

Sources and methodology

The data is curated from MDN Web Docs, which is the authoritative community-maintained reference for web standards. The 30 standard (non-vendor-prefixed) pseudo-elements documented on MDN as of October 2026 are included; vendor-prefixed ones such as ::-webkit-slider-thumb and ::-moz-range-track are excluded. They span the CSS2 originals through modern additions introduced alongside the View Transitions API and the CSS Custom Highlight API.

Pseudo-elements that accept arguments — such as ::part(), ::slotted(), ::highlight(), ::picker(), ::scroll-button(), and the view-transition family — are listed with their base token (including the parentheses where they are part of the function-like syntax) so they are clearly distinguished from simple selectors. The selector field contains the canonical form exactly as it would appear in a stylesheet.

This dataset is useful for CSS tooling such as linters, editors with auto-complete, documentation generators, or any application that needs a machine-readable list of valid CSS pseudo-element tokens and their intended purpose.

Versioning

URLs under /v1/ are stable: field names and types will not change in a way that breaks consumers. Values can be corrected or records added when the upstream source changes; schema-incompatible updates ship under a new version path. See the css-pseudo-elements changelog for this dataset's history.

Related datasets

More Code datasets