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.
Quick fetch
Stable URL. CORS-enabled. No auth.
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
min: 5.2 KB · /v1/css-pseudo-elements.min.json
- CSV 4.4 KB
/v1/css-pseudo-elements.csv
- TypeScript 5.9 KB
/v1/css-pseudo-elements.ts
export const cssPseudoElements
type PseudoElement = (typeof cssPseudoElements)[number]
Schema
Each record in the dataset has the following shape.
| 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.
| selector | description |
|---|---|
| ::after | Creates a pseudo-element that is the last child of the selected element. Often used to add cosmetic content with the content property. |
| ::backdrop | A box rendered immediately below a top-layer element (such as a fullscreen element or dialog), filling the entire viewport. |
| ::before | Creates a pseudo-element that is the first child of the selected element. Often used to add cosmetic content with the content property. |
| ::checkmark | Represents the checkmark shown next to the selected <option> in a customizable <select> element (appearance: base-select). |
| ::column | Represents an individual column box of a multi-column container, used to generate scroll markers for each column. |
| ::cue | Matches WebVTT cues within a selected element. Can be used to style captions and other cues in media with VTT tracks. |
| ::cue-region | Matches WebVTT cue regions within a selected element, allowing styling of entire regions of VTT captions. |
| ::details-content | Represents the expandable/collapsible content of a <details> element (everything except the <summary>). |
| ::file-selector-button | Represents the button of an <input> element with type="file". |
| ::first-letter | Applies 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). |
Fetch examples
Drop-in snippets in five languages.
curl -sSL https://staticdata.dev/v1/css-pseudo-elements.json | jq '.[0]' 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]); 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]) 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])
} 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
- ansi-colors
- ascii
- cron-presets
- css-functions
- css-named-colors
- css-pseudo-classes
- css-units
- data-units
- exit-codes
- file-signatures
- hash-algorithms
- js-array-methods
- js-math-methods
- js-object-methods
- js-string-methods
- json-schema-keywords
- jwt-claims
- mathematical-constants
- measurement-units
- node-builtin-modules
- owasp-top-10
- periodic-table
- physical-constants
- posix-signals
- programming-languages
- regex-flags
- regex-patterns
- roman-numerals
- si-base-units
- si-derived-units
- si-prefixes
- spdx-licenses
- strftime-tokens
- tailwind-colors
- time-units
- unicode-blocks
- unicode-general-categories
- unicode-planes
- unix-file-permissions
- xterm-256-colors