CSS pseudo-elements are special selectors that allow you to apply styles to specific parts of an HTML element. Unlike regular selectors, which target the element itself, pseudo-elements target a specific part of the element, such as its content or its border.
There are several different types of pseudo-elements in CSS, but the two most common ones are ::before and ::after.
The ::before pseudo-element allows you to insert content before the content of an element. This content can be text, an image, or any other type of content that you want to add. For example, you can use ::before to add a chapter number or bullet point to the beginning of each list item or paragraph.
The ::after pseudo-element is similar to ::before, but it allows you to insert content after the content of an element. You can use ::after to add additional text, an icon, or any other type of content to an element. For example, you can use ::after to add a footnote number or copyright symbol to the end of a paragraph.
Both ::before and ::after pseudo-elements require the content property to specify what content should be inserted. Other CSS properties, such as font-size, color, and background-color, can also be used to style the content.
Pseudo-elements can also be combined with other CSS selectors to target specific elements. For example, you can use h1::before to add content before the heading text in all h1 elements.
In addition to ::before and ::after, other CSS pseudo-elements include ::first-letter (which targets the first letter of an element’s content), ::first-line (which targets the first line of an element’s content), and ::selection (which targets the selected text within an element).
Pseudo-elements are special selectors in CSS that allow you to style certain parts of an element that aren’t part of the actual HTML code. They’re denoted by a double colon (::) before the name of the pseudo-element.
There are several different pseudo-elements that you can use in CSS, but the most commonly used ones are ::before and ::after. Here’s how to use them:
::before
The ::before pseudo-element allows you to insert content before the content of an element. This content can be text, an image, or anything else that you want to add. Here’s an example:
<style>
h1::before {
content: "Chapter ";
font-weight: bold;
}
</style>
<h1>The Title of My Chapter</h1>
In this example, we’re adding the text “Chapter ” before the content of the h1 element. We’re also making the text bold using the font-weight property.
::after
The ::after pseudo-element is similar to ::before, but it allows you to insert content after the content of an element. Here’s an example:
<style>
p::after {
content: " (The End)";
font-style: italic;
}
</style>
<p>This is the content of my paragraph</p>
In this example, we’re adding the text ” (The End)” after the content of the p element. We’re also making the text italic using the font-style property.
Styling Pseudo-elements
You can style pseudo-elements just like any other element in CSS. Here’s an example:
<style>
h1::before {
content: "Chapter ";
font-weight: bold;
color: red;
font-size: 24px;
}
</style>
<h1>The Title of My Chapter</h1>
In this example, we’ve added the color and font-size properties to the pseudo-element selector, so the text “Chapter ” will be red and 24 pixels in size.
Using Pseudo-elements with Classes
You can also use pseudo-elements with classes, which allows you to add content to multiple elements at once. Here’s an example:
<style>
.chapter-title::before {
content: "Chapter ";
font-weight: bold;
}
</style>
<h1 class="chapter-title">The Title of My Chapter</h1>
<h1 class="chapter-title">The Title of Another Chapter</h1>
In this example, we’ve added the class “chapter-title” to both h1 elements. The ::before pseudo-element selector is then applied to all elements with the “chapter-title” class, so the text “Chapter ” will be added to both headings.
:first-letter
This pseudo-element is used to select and style the first letter of a block-level element. Here’s an example:
p:first-letter {
font-size: 2em;
color: red;
}
In this example, the first letter of any <p> element will be styled with a font size of 2em and a red color.
::first-line
This pseudo-element is used to select and style the first line of a block-level element. Here’s an example:
p::first-line {
font-weight: bold;
color: blue;
}In this example, the first line of any <p> element will be styled with bold font weight and a blue color.
::backdrop
This pseudo-element is used to style the area behind the content of an element that has been made transparent using the backdrop-filter property. Here’s an example:
#my-element::backdrop {
background-color: rgba(255, 255, 255, 0.5);
}In this example, the backdrop behind the content of the element with ID my-element will be styled with a semi-transparent white color.
::marker
This pseudo-element is used to style the marker of a list item, such as the bullet point in an unordered list or the number in an ordered list. Here’s an example:
ul::marker {
content: "•";
color: red;
}In this example, the marker for any <ul> element will be styled with a red color and a bullet point character.
::selection
This pseudo-element is used to style the portion of text that a user selects with their mouse or keyboard. Here’s an example:
::selection {
background-color: yellow;
color: black;
}In this example, any selected text on the page will be styled with a yellow background color and black text color.
::placeholder: This pseudo-element is used to style the placeholder text of an input or textarea element. Here’s an example:
input::placeholder {
color: gray;
}In this example, the placeholder text for any <input> element will be styled with a gray color.
::cue
This pseudo-element is used to style the cue (such as a subtitle or caption) of a media element, such as an audio or video player. Here’s an example:
video::cue {
color: white;
background-color: rgba(0, 0, 0, 0.5);
font-size: 1.2em;
}In this example, the cues for any <video> element will be styled with a white text color, semi-transparent black background color, and a font size of 1.2em.
That’s a basic overview of how to use pseudo-elements in CSS. They’re a powerful tool for adding extra content and styling to your HTML elements!