A pseudo-element lets you style a specific part of an element, or insert generated content, without adding extra HTML. They use a double colon, like ::before.

::before and ::after

Insert generated content before or after the content of an element. They require the content property to render, even if it is an empty string.

.lotgrafix-link::after {
    content: " \2192";
}

.lotgrafix-badge::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: green;
    margin-right: 6px;
}

::first-letter

Styles the first letter of a block. Perfect for drop caps.

.lotgrafix-article p:first-of-type::first-letter {
    font-size: 3em;
    float: left;
    line-height: 1;
    margin-right: 8px;
}

::first-line

Styles the first line of a block of text. It adapts automatically when the screen size changes.

.lotgrafix-article p::first-line {
    font-weight: bold;
    text-transform: uppercase;
}

::marker

Styles the bullet or number of a list item.

li::marker {
    color: orangered;
    font-weight: bold;
}

::selection

Styles the text selected by the user.

::selection {
    background: orangered;
    color: #fff;
}

::placeholder

Styles the placeholder text of inputs and textareas.

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

::file-selector-button

Styles the button inside a file input.

input[type="file"]::file-selector-button {
    background: orangered;
    color: #fff;
    border: 0;
    padding: 8px 16px;
    cursor: pointer;
}

::backdrop

Styles the layer behind a dialog opened as a modal or an element in fullscreen.

dialog::backdrop {
    background: rgba( 0, 0, 0, 0.7 );
}

::target-text

Styles the text highlighted by a text fragment link, for example a link ending in #:~:text=hello.

::target-text {
    background: yellow;
    color: #000;
}

::slotted

Styles elements placed inside a slot of a web component.

::slotted( p ) {
    margin: 0;
}

::part

Styles an element of a web component that exposes a part attribute from its shadow DOM.

my-element::part( button ) {
    background: orangered;
}

Single colon syntax

For ::before, ::after, ::first-letter and ::first-line the older single colon syntax also works. Use the double colon in new code to tell pseudo-elements apart from pseudo-classes.