Affiliate link

Advanced CSS - Pseudo Elements

Cascading Style Sheets (CSS) is the language for styling website design. The language is written within HTML or XML.

• ::after
• ::before
• ::first-letter
• ::first-line
• ::marker
• ::placeholder
• ::selection

::first-letter - Typographic effect

::first-letter - Initial Capital

Display uppercase letter at the start of the block text that is set in a larger font size.

p::first-letter {
    font-family: serif;
    font-weight: bold;
    font-size: 3em;
    color: blue;
}

::first-letter - Drop Capital

Display uppercase letter adjacent to the block text that is set in a larger font size.

p::first-letter {
    float: left;
    font-family: serif;
    font-weight: bold;
    font-size: 3em;
    margin-top: 0px;
    margin-bottom: 0px;
    color: blue;
}

::first-line - Typographic effect

Only following css properties are supported for ::first-line,

• background properties
• color
• font properties
• letter-spacing
• line-height
• opacity
• text-decoration properties
• text-transform
• text-shadow
• word-spacing
• vertical-align

p::first-line {
    font-weight: bold;
    color: blue;
}

::marker

::marker is a pseudo-element for:

• Elements with css display: list-item;
• HTML ordered/unordered list‘s bullet or number indicator

Only following css properties are supported for ::marker,

• color
• content
• direction
• font properties
• animation/transition properties
• text-combine-upright
• unicode-bidi
• white-space

ol ::marker {
    color: blue;
    font-size: 2em;
}
ul ::marker {
    content: '👉';
}

Try highlight the text below.

::placeholder

::placeholder is used to define the styles of form inputs placeholder.

The css properties that are supported for ::placeholder, is same as ::first-line.

p::selection {
    background: lime;
    color: blue;
}

Try highlight the text below.

::selection

::selection is used to define the styles of the content that users highlighted with their mouse.

Only following css properties are supported for ::selection,

• background-color
• color
• fill-color
• text-decoration properties
• text-shadow
• stroke-color
• stroke-width

p::selection {
    background: lime;
    color: blue;
}

Try highlight the text below.