CSS Pseudo Elements
CSS Pseudo Elements lets you style a specific part of the selected elements. For Example, Styling the first letter or line of an element, and Inserting content before or after the content of an element. All of these can be done using Pseudo Elements in CSS.
Note that in contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state.
Syntax:
selector::pseudo-element {
property: value;
}
There are many Pseudo Elements in CSS but the ones which are most commonly used are as follows:
Table of Content
- ::first-line Pseudo-element
- ::first-letter Pseudo-element
- ::before Pseudo-element
- ::after Pseudo-element
- ::marker Pseudo-element
- ::selection Pseudo-element
1. CSS ::first-line Pseudo-element
Applies styles to the first line of a block-level element. Note that the length of the first line depends on many factors, including the width of the element, the width of the document, and the font size of the text. Note that only a few properties are applied for first-line pseudo-element like font properties, color properties, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear, etc.
Example: This example uses ::first-line selector to style the first line of paragraph.
<!DOCTYPE html>
<html lang="en">
<head>
<title>first-line Demo</title>
<style>
body {
background-color: whitesmoke;
color: green;
font-size: large;
text-align: center;
}
p::first-line {
color: Red;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Beginner For Beginner</h1>
<h2>::first-line element</h2>
<p>
This is a paragraph using first-line
pseudo-element to style first line of
the paragraph. Content in the first
line turns red and becomes bold.
</p>
</body>
</html>
Output:
2. CSS ::first-letter Pseudo-element
Applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables). Note that only a few properties are applied for first-letter pseudo-element like font properties, color properties, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear, etc.
Example: This example uses ::first-letter selector to style the first letter of paragraph.
<!DOCTYPE html>
<html lang="en">
<head>
<title>first-letter Demo</title>
<style>
body {
background-color: whitesmoke;
color: green;
font-size: large;
text-align: center;
}
p::first-letter {
color: Red;
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Beginner For Beginner</h1>
<h2>::first-letter element</h2>
<p>
This is a paragraph using first-letter
pseudo-element to style first letter
of the paragraph. first-letter element
turned the first letter of this paragraph
to red and made it bold.
</p>
</body>
</html>
Output:
3. CSS ::before Pseudo-element
Creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
Example: This example uses ::before selector to style the first child of the element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>before Demo</title>
<style>
body {
background-color: whitesmoke;
color: green;
font-size: large;
text-align: center;
}
p::before {
content: '"';
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Beginner For Beginner</h1>
<h2>::before element</h2>
<p>
This is a paragraph to which
we added red color quotation
marks using ::before element.
</p>
</body>
</html>
Output:
4. CSS ::after Pseudo-element
Creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
Example: This example uses ::after selector to style the last child of element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>after Demo</title>
<style>
body {
background-color: whitesmoke;
color: green;
font-size: large;
text-align: center;
}
p::after {
content: '"';
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Beginner For Beginner</h1>
<h2>::after element</h2>
<p>
This is a paragraph to which
we added red color quotation
marks using ::after element.
</p>
</body>
</html>
Output:
5. CSS ::marker Pseudo-element
Selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to display: list-item, such as the <li> and <summary> elements.
Example: This example uses ::marker selector to style the bullet styles of a list.
<!DOCTYPE html>
<html lang="en">
<head>
<title>marker Demo</title>
<style>
body {
background-color: whitesmoke;
color: green;
text-align: center;
}
ul {
width: 40px;
}
ul li::marker {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Beginner For Beginner</h1>
<h2>::marker element</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
Output:
6. CSS ::selection Pseudo-element
Applies styles to the part of a document that has been highlighted by the user such as clicking and dragging the mouse across the text.
Example: This example uses ::selected selector to style the selected text in the elements.
<!DOCTYPE html>
<html lang="en">
<head>
<title>selection Demo</title>
<style>
body {
background-color: whitesmoke;
color: green;
text-align: center;
}
p::selection {
color: red;
background-color: green;
font-size: 30px;
}
::selection {
color: green;
background-color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Beginner For Beginner</h1>
<h2>::selection element</h2>
<p>
Content in this paragraph turns
red with green background on selection.
</p>
<span>
As this is not a paragraph, you can
notice red background and green text on
selection.
</span>
</body>
</html>
Output:
CSS ::selection Pseudo-element Output
Contact Us