Pseudo-Element Selectors

Pseudo-elements create virtual elements that do not exist in the HTML source. They are prefixed with a double colon (::) in modern CSS.

Content Pseudo-Elements

::before and ::after insert generated content at the start or end of an element. They require a content property (even if empty).

Text Pseudo-Elements

::first-letter targets the first character — useful for drop-caps. ::first-line targets the first rendered line of text.

Selection Pseudo-Element

::selection styles the highlighted portion of text when a user selects it.

Placeholder

::placeholder styles the placeholder text inside form inputs.

Example

/* Decorative quote mark before blockquotes */
blockquote::before {
    content: "\201C";
    font-size: 4rem;
    color: #ccc;
    line-height: 0;
    vertical-align: -1rem;
    margin-right: 4px;
}

/* Clear floats without extra HTML */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* Drop cap */
article p:first-of-type::first-letter {
    font-size: 3.5rem;
    float: left;
    line-height: 0.85;
    margin-right: 6px;
    font-weight: 700;
    color: #1a73e8;
}

/* Custom selection colour */
::selection {
    background: #1a73e8;
    color: #fff;
}

/* Styled placeholder */
input::placeholder {
    color: #aaa;
    font-style: italic;
}

CSS

Full Editor

Pro Tip

Always use the double-colon (::) syntax for pseudo-elements to distinguish them from pseudo-classes at a glance — single-colon still works in browsers but is considered legacy.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned