CSS pseudo-elements are used to style specific parts of an HTML element, rather than the element itself.
They allow you to apply styles to parts of an element's content or create elements that don't exist in the
HTML document structure. Pseudo-elements are denoted by a double colon (::) and are often used to enhance
the design and presentation of web pages. 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.
- ::before
- ::after
- ::first-line
- ::first-letter
- ::selection
- ::marker
- ::before:
This pseudo-element allows you to insert content before the content of an element. It's often used for
decorative elements or to generate additional content.
Example:
HTML:
<html>
<head>
<style>
h3::before {
content: "Hello ";
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h3>World</h3>
</body>
</html>
Output:
World
- ::after
This pseudo-element inserts content after the content of an element. It's commonly used for adding
icons, decorative elements, or additional text.
Example:
HTML:
<html>
<head>
<style>
h2::after {
content: " !";
color: lightblue;
font-size: 30px;
}
</style>
</head>
<body>
<h2>World</h2>
</body>
</html>
Output:
World
- ::first-line:
This pseudo-element selects and styles the first line of text within an element. It's often used for
drop caps, changing the font size or color of the first line, or adding special styling.
Example:
<html>
<head>
<style>
p::first-line {
color: Red;
font-weight: bold;
}
</style>
</head>
<body>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam enim quo quis?Lorem ipsum,
dolor
sit amet consectetur adipisicing elit. Quibusdam enim quo quis?Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Quibusdam enim quo quis?Lorem ipsum, dolor
sit amet consectetur adipisicing elit. Quibusdam enim quo quis?</p>
</body>
</html>
Output:
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam enim quo quis?Lorem ipsum, dolor
sit amet consectetur adipisicing elit. Quibusdam enim quo quis?Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Quibusdam enim quo quis?Lorem ipsum, dolor
sit amet consectetur adipisicing elit. Quibusdam enim quo quis?
- ::first-letter:
It selects and styles the first letter of a block-level element. It's commonly used for drop caps or
ornamental initials.
Example:
<html>
<head>
<style>
h1::first-letter {
color: Red;
}
</style>
</head>
<body>
<h1>CodeBetter</h1>
</body>
</html>
Output:
CodeBetter
- ::selection:
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:
<html>
<head>
<style>
u::selection {
background-color: Red;
}
</style>
</head>
<body>
<i></i>
</body>
</html>
Output:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis eius et ullam quos magni
voluptate mollitia provident praesentium adipisci ipsum, quas eligendi ad numquam doloremque
quasi
sed debitis repudiandae sit, consectetur, ducimus possimus ipsam! nostrum laudantium amet
voluptate impedit.
- ::marker:
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:
<html>
<head>
<style>
ul li::marker {
color: red;
font-size: 15px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>BOOTSTRAP</li>
</ul>
</body>
</html>
Output:
