A CSS psuedo-element styles a specified part of an HTML element.
They are commonly used to add symbols or images before or after text.
A pseudo-element starts with a double colon (::
) like ::after
, ::before
etc.
An ::after
pseudo-element which adds an image after the content.
<style>
.pseudo::after {
content: url('/img/css/heart.png');
}
</style>
<div class="pseudo">
We all love CSS
</div>
CSS pseudo-element is used to style specified parts of an HTML element.
Pseudo elements can be used to perform the following actions:
Syntax of a pseudo element.
selector::pseudo-element { property:value; }
selector
refers to the HTML element(s) to be styled.::pseudo-element
specifies the element part (e.g. ::before
, ::after
).::
signifies that a pseudo-element follows.Note: Use double colons (::) instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. For historical reasons most browsers also accept a single colon (:) for pseudo-elements.
Below are the available CSS pseudo elements.
Selector | Example | Description |
---|---|---|
::before |
p::before |
Insert something before the content of each <p> element |
::after |
p::after |
Insert something after the content of each <p> element |
::first-letter |
p::first-letter |
Selects the first letter of each <p> element |
::first-line |
p::first-line |
Selects the first line of each <p> element |
::selection |
p::selection |
Selects the portion of an element that is selected by a user |
::before
The ::before
pseudo-element inserts content before the element.
Content can be text, image, or another element.
This pseudo-element renders an image before the paragraph.
An image displays before this element
<style>
.before::before {
content: url('/img/css/check.png');
}
</style>
<p class="before">
An image displays before this element
</p>
And this psuedo-element creates a teal box before the paragraph.
A teal box displays before this element
<style>
.beforeempty::before {
content: "";
display: inline-block;
width: 50px;
height: 50px;
background: teal;
margin-right: 10px;
}
</style>
<p class="beforeempty">
A teal box displays before this element
</p>
::after
The ::after
pseudo-element inserts content after the specified element.
Content can be text, image, or another element.
This pseudo-element renders an image before the paragraph.
An image displays after this element
<style>
.after::after {
content: url('/img/css/check.png');
}
</style>
<p class="after">
An image displays after this element
</p>
And this psuedo-element creates a teal box after the paragraph.
A teal box displays after this element
<style>
.afterempty::after {
content: "";
display: inline-block;
width: 50px;
height: 50px;
background: teal;
margin-left: 10px;
}
</style>
<p class="afterempty">
A teal box displays after this element
</p>
::first-letter
Use ::first-letter
to style to the first letter of text in an element.
With font-size adjust the size of the letter.
This psuedo element enlarges the first letter in the text.
Paul Gauguin was a French Post-Impressionist artist. Unappreciated until after his death, Gauguin is now recognized for his experimental use of color and Synthetist style that were distinct from Impressionism. Toward the end of his life, he spent ten years in French Polynesia. The paintings from this time depict people or landscapes from that region.
<style>
.first::first-letter {
font-size: 32px;
}
</style>
<p class="first">
Paul Gauguin was a French
Post-Impressionist artist.
Unappreciated until after his
death, Gauguin is now recognized
for his experimental use of color
and Synthetist style that were
distinct from Impressionism.
Toward the end of his life, he
spent ten years in French Polynesia.
The paintings from this time depict
people or landscapes from that
region.
</p>
For details on font-size
, see our CSS font-size Property Reference.
::first-line
Use ::first-line
to style the first line of a text in an element.
This psuedo element adds a custom style to the first line.
His work was influential on the French avant-garde and many modern artists, such as Pablo Picasso and Henri Matisse, and he is well known for his relationship with Vincent and Theo van Gogh. Gauguin's art became popular after his death, partially from the efforts of dealer Ambroise Vollard, who organized exhibitions of his work late in his career and assisted in organizing two important posthumous exhibitions in Paris.
<style>
.firstline::first-line {
color: orangered;
font-style: italic;
}
</style>
<p class="firstline">
His work was influential on the French
avant-garde and many modern artists, such
as Pablo Picasso and Henri Matisse, and
he is well known for his relationship with
Vincent and Theo van Gogh. Gauguin's art
became popular after his death, partially
from the efforts of dealer Ambroise
Vollard, who organized exhibitions of his
work late in his career and assisted in
organizing two important posthumous
exhibitions in Paris.
</p>
::selection
Use ::selection
to style the selected or highlighted portion of text.
To see the effect, the user must first select text.
This psuedo element adds a custom style to selected text.
Select text to view the style.
Paul Gauguin was a French Post-Impressionist artist. Unappreciated until after his death, Gauguin is now recognized for his experimental use of color and Synthetist style that were distinct from Impressionism. Toward the end of his life, he spent ten years in French Polynesia. The paintings from this time depict people or landscapes from that region.
<style>
.selection::selection {
color: white;
background-color: firebrick;
}
</style>
<p class="selection">
Paul Gauguin was a French
Post-Impressionist artist.
Unappreciated until after his
death, Gauguin is now recognized
for his experimental use of color
and Synthetist style that were
distinct from Impressionism.
Toward the end of his life, he
spent ten years in French Polynesia.
The paintings from this time depict
people or landscapes from that
region.
</p>