Pseudo-elements Dark Mode Playground 🌌

Explore the power of CSS pseudo-elements with interactive examples and modern dark theme design

::before & ::after

This heading has sparkles before and after using ::before and ::after pseudo-elements. These pseudo-elements allow you to insert content before or after an element's content without modifying the HTML.

::first-letter

The first letter of this paragraph is large and colored sky-blue. It floats beautifully next to the text. This effect is achieved using the ::first-letter pseudo-element, perfect for creating magazine-style typography and elegant layouts.

::first-line

Only the first line of this paragraph is bold and colored differently. The rest of the paragraph continues normally, showing the effect clearly. The ::first-line pseudo-element automatically adjusts based on screen size and font size changes, making it responsive by design.

::placeholder

The placeholder text is styled using ::placeholder pseudo-element with custom color and italic style. This enhances user experience with visually appealing form inputs.

::selection

Try selecting this text with your mouse or keyboard. The highlighted selection turns sky-blue with dark text for contrast. This is controlled by the ::selection pseudo-element, which allows you to customize how text appears when selected.

::marker

List markers are styled using ::marker pseudo-element with custom colors and sizes. This provides consistent styling across different browsers.

::after hover effect

The button uses ::after pseudo-element to create a hover effect with a sparkling emoji. This demonstrates how pseudo-elements can enhance interactive elements.

::backdrop

Modal Dialog Example

This is a dialog using ::backdrop pseudo-element with blur and semi-transparent sky-blue overlay. The backdrop creates a dimmed layer behind the dialog, focusing user attention on the modal content.

::cue (video captions)

Turn on captions in the video player to see ::cue effect. Captions are styled with custom colors and background for better readability and visual appeal.