CSS pseudo-elements like `::before` and `::after` are powerful tools that allow developers to insert content into a web page via CSS, without modifying the HTML structure. These pseudo-elements are widely used for adding decorative content, improving user interfaces, and enhancing web designs with minimal code changes.
In this article, we’ll dive deep into how ::before and ::after work, their key differences, and practical use cases to help you make the most of these CSS features.
What Are CSS Pseudo-Elements?
Pseudo-elements are special keywords that allow you to style specific parts of an element. Unlike regular CSS selectors, pseudo-elements don’t target the whole element but rather a part of it, like the first letter, line, or even the content before and after an element.
The `::before` and `::after` pseudo-elements are often used to insert content directly before or after the content of an HTML element.
/* Pseudo-element syntax */
element::before {
/* styles */
}
element::after {
/* styles */
}
...You can also use the single-colon syntax (:before, :after), though modern browsers prefer the double-colon syntax (`::before`, `::after`) to distinguish between pseudo-elements and pseudo-classes.
How ::before` and ::after Work?
1. The ::before Pseudo-Element
The ::before pseudo-element insers content before the actual content of an element, as its name suggests. This can be useful for adding icons, symbols, or other content that should appear before the element’s main content.
html>
copy
This is a paragraph.
...css>
copy
.example::before {
content: "🌟 ";
color: gold;
}
...n this example, the star emoji is inserted before the paragraph text using ::before, and it appears styled in gold.
2. The ::after Pseudo-Element
The ::after pseudo-element, on the other hand, inserts content after the content of an element. It’s commonly used for decorative purposes, such as adding icons, closing quotes, or visual effects after text.
Many countries have their own TLDs. For example - Bangladesh has .bd like .com.bd, the UK has .uk and .co.uk. You may have seen the .io TLD before – it is reserved for the British Indian Ocean Territory, but now it's is popular with tech companies because the io is similar to I/O, or Input Output.
html
copy
This is a paragraph.
...css
copy
.example::after {
content: " ⭐";
color: gold;
}
...Here, a star emoji is added after the paragraph text using ::after.
Key Properties of ::before and ::after
1. Content Property
The most crucial property for ::before and ::after is content. Without it, these pseudo-elements won’t display anything. You can insert text, Unicode characters, or even URLs for images.
css
copy
.element::before {
content: "Hello, ";
}
.element::after {
content: "!";
}
...2. Display Property
By default, ::before and ::after are inline elements, which means they behave like text. However, you can change their display property to manipulate their behavior (e.g., block, flex, inline-block).
css
copy
.element::before {
content: "";
display: block;
width: 100%;
height: 5px;
background-color: red;
}
...In this case, the ::before pseudo-element becomes a full-width red block above the element’s content.
3. Positioning and Layout
Pseudo-elements can be positioned using CSS positioning techniques like relative, absolute, and fixed. This allows for more intricate designs like adding floating elements or background images to specific parts of the page.
css
copy
.element::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: blue;
bottom: 0;
left: 0;
}
...Common Use Cases
1. Adding Decorative Icons
You can use ::before or ::after to insert icons before or after buttons, links, or headings.
css
copy
button::before {
content: "🔍 ";
font-size: 16px;
}
...2. Creating Custom Quotes
You can use ::before and ::after to automatically add quotation marks around a blockquote.
css
copy
blockquote::before {
content: "“";
font-size: 24px;
}
blockquote::after {
content: "”";
font-size: 24px;
}
...3. Displaying Counters or Badges
For list items or notifications, ::before or ::after can be used to display counters or badges.
css
copy
.notification::after {
content: " (3)";
color: red;
}
...4. Adding Background Decorations
You can create stylish backgrounds or borders by using pseudo-elements with absolute positioning.
css
copy
.box::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
z-index: -1;
}
...Best Practices
- Always Use content: Without the content property, pseudo-elements won't be displayed.
- Use sparingly: Overusing pseudo-elements can make your CSS more complex and harder to maintain.
- Test for Accessibility: Ensure that any content added via pseudo-elements is purely decorative and doesn't contain essential information for screen readers.
Conclusion
CSS pseudo-elements ::before and ::after provide a versatile way to insert and style additional content on your page without cluttering your HTML. They can be used for both aesthetic purposes, like adding icons and decorative elements, and functional purposes, such as adding counters or background decorations.
By mastering these pseudo-elements, you can elevate your web designs, streamline your code, and enhance the user experience with minimal effort.
