A CSS pseudo-element allows the selective styling of specific segments within an element’s content, such as
the initial letter or line, and the insertion of content before or after an element’s content.
The structure of pseudo-elements:
| selector::pseudo-element { property: value; } |
The ::first-line pseudo-element is utilized to apply distinctive styling to the initial line of text.
The subsequent example demonstrates how to style the first line of text within all <p> elements:
Example
|
p::first-line { |
Please be aware that the ::first-line pseudo-element is exclusively applicable to block-level elements.
The specified properties can be utilized with the ::first-line pseudo-element:
|
Notice the double colon notation: The double colon was introduced in CSS3 to differentiate pseudo-elements from pseudo-classes, as per CSS guidelines. In CSS1 and CSS2, the single-colon syntax was used for both pseudo-classes and pseudo-elements. For backward compatibility, using the single-colon syntax for pseudo-elements is still acceptable in CSS1 and CSS2. |
The ::first-letter pseudo-element is employed to apply a unique style to the initial letter of a text.
In the following example, the first letter of the text within all <p> elements is formatted:
Example
| p::first-letter { color: #ff0000; font-size: xx-large; } |
The ::first-letter pseudo-element can utilize the following properties for styling:
HTML classes can be combined with pseudo-elements.
Example
| p.intro::first-letter { color: #ff0000; font-size: 200%; } |
In the provided example, the initial letter of paragraphs with the class “intro” will be showcased in red and enlarged.
Multiple pseudo-elements can be combined as well.
In the upcoming example, the initial letter of a paragraph will appear in red with an xx-large font size. Subsequently, the remainder of the first line will display in blue with small-caps. The remaining text within the paragraph will retain the default font size and color.
Example
| p::first-letter { color: #ff0000; font-size: xx-large; } p::first-line { color: #0000ff; font-variant: small-caps; } |
The ::before pseudo-element allows the insertion of content preceding an element’s content.
In the provided example, an image is inserted before the content of every <h1> element.
Example
| h1::before { content: url(smiley.gif); } |
The ::after pseudo-element enables the addition of content following an element’s content.
In this particular example, an image is inserted after the content of every <h1> element.
Example
| h1::after { content: url(smiley.gif); } |
The ::marker pseudo-element targets the markers of list items.
In the provided example, the markers of list items are styled.
Example
| ::marker { color: red; font-size: 23px; } |
The ::selection pseudo-element corresponds to the part of an element highlighted by a user.
Specific CSS properties can be assigned to ::selection: color, background, cursor, and outline.
In the forthcoming example, the selected text will be displayed in red against a yellow background.
Example
| ::selection { color: red; background: yellow; } |
|
Selector |
Example |
Example description |
|
::after |
p::after |
Add content after each `<p>` element’s text. |
|
p::before |
Prepend content to each `<p>` element’s text. |
|
|
::first-letter |
p::first-letter |
Targets the first letter of each `<p>` element. |
|
::first-line |
p::first-line |
Targets the first line of each `<p>` element. |
|
::marker |
Targets the markers of list items. |
|
|
::selection |
p::selection |
Targets the portion of an element that a user has selected. |
|
Selector |
Example |
Example description |
|
:active |
a:active |
Selects the currently active link |
|
:checked |
input:checked |
Selects each checked `<input>` element |
|
:disabled |
input:disabled |
Selects all disabled `<input>` elements |
|
:empty |
p:empty |
Selects each `<p>` element that does not contain any children |
|
:enabled |
input:enabled |
Selects every enabled <input> element |
|
:first-child |
p:first-child |
Targets each `<p>` element that is the first child of its parent. |
|
:first-of-type |
p:first-of-type |
Targets each `<p>` element that is the first occurrence of a `<p>` element within its parent. |
|
:focus |
input:focus |
Targets the `<input>` element currently in focus. |
|
:hover |
a:hover |
Targets links when hovered over with a mouse. |
|
:in-range |
input:in-range |
Targets `<input>` elements with values falling within a specified range. |
|
:invalid |
input:invalid |
Targets all `<input>` elements with values that are considered invalid. |
|
p:lang(it) |
Targets each `<p>` element with a `lang` attribute value starting with “it”. |
|
|
:last-child |
p:last-child |
Targets each `<p>` element that is the last child within its parent. |
|
:last-of-type |
p:last-of-type |
Targets each `<p>` element that is the last occurrence of a `<p>` element within its parent. |
|
:link |
a:link |
Targets all links that have not been visited. |
|
:not(selector) |
:not(p) |
Targets every element that is different from a `<p>` element. |
|
:nth-child(n) |
p:nth-child(2) |
Targets each `<p>` element that is the second child within its parent. |
|
:nth-last-child(n) |
p:nth-last-child(2) |
Targets each `<p>` element that is the second child within its parent, counting from the last child. |
|
:nth-last-of-type(n) |
p:nth-last-of-type(2) |
Targets each `<p>` element that is the second occurrence of a `<p>` element within its parent, counting from the last child. |
|
:nth-of-type(n) |
p:nth-of-type(2) |
Targets each `<p>` element that is the second occurrence of a `<p>` element within its parent. |
|
:only-of-type |
p:only-of-type |
Targets each `<p>` element that is the only occurrence of a `<p>` element within its parent. |
|
:only-child |
p:only-child |
Targets each `<p>` element that is the sole child within its parent. |
|
:optional |
input:optional |
Targets `<input>` elements lacking a “required” attribute. |
|
:out-of-range |
input:out-of-range |
Targets `<input>` elements with values falling outside a specified range. |
|
:read-only |
input:read-only |
Targets `<input>` elements with a specified “readonly” attribute. |
|
:read-write |
input:read-write |
Targets `<input>` elements lacking a “readonly” attribute. |
|
:required |
input:required |
Targets `<input>` elements with a specified “required” attribute. |
|
:root |
root |
Targets the root element of the document. |
|
:target |
#news:target |
Targets the currently active `#news` element (clicked within a URL containing that anchor name). |
|
:valid |
input:valid |
Targets all `<input>` elements with values that are considered valid. |
|
:visited |
a:visited |
Targets all links that have been visited. |
