The CSS ::after pseudo-element is a powerful feature used to insert generated content immediately after the content of the selected element. It is crucial to note that ::after requires the content property, which can be an empty string, text, or even an attribute from the element. This allows for creating decorative elements, tooltips, or separators without adding extra HTML markup, keeping your code clean and semantic.
Example 1: Basic Content Insertion
/* Selects the paragraph and adds text after it */
p::after {
content: " - Read more..."; /* The text to be inserted */
color: blue; /* Styles the added content */
font-style: italic;
}
Explanation This code targets every paragraph (<p>) element and appends the string " - Read more..." right after its original content. The content property is essential for ::after to work, and the generated text can be styled independently.
Example 2: Breadcrumb Separators
/* Adds a separator after each list item, except the last one */
.breadcrumb li:not(:last-child)::after {
content: ">"; /* The separator character */
padding: 0 10px; /* Adds space around the separator */
color: #666;
}
Explanation This example demonstrates a common use case for navigation. The ::after pseudo-element inserts a ">" character after each list item in a breadcrumb trail, but the :not(:last-child) selector smartly prevents it from being added to the final item.
Example 3: Creating Decorative Shapes
/* Adds a decorative underline to h2 elements */
h2::after {
content: ''; /* Must be present, but can be empty */
display: block; /* Allows setting width and height */
width: 50px;
height: 4px;
background-color: tomato;
margin-top: 8px; /* Space between text and the line */
}
Explanation Here, ::after is used for decoration rather than text. By setting content to an empty string and display to block, we can style the pseudo-element as a shape, in this case, a colored underline for the <h2> heading.
Example 4: Tooltips with Attributes
/* Creates a tooltip using a data attribute */
.tooltip::after {
content: attr(data-tooltip); /* Pulls content from the data-tooltip attribute */
position: absolute;
background-color: #333;
color: #fff;
padding: 5px;
border-radius: 4px;
opacity: 0; /* Hidden by default */
transition: opacity 0.3s;
}
/* Shows the tooltip on hover */
.tooltip:hover::after {
opacity: 1;
}
Explanation This advanced technique uses the attr() function to grab text from an HTML data-tooltip attribute and display it as a tooltip. The pseudo-element is positioned absolutely and made visible on hover, creating a dynamic and accessible tooltip.
Example 5: Clearing Floats
/* The modern clearfix hack */
.clearfix::after {
content: "";
display: table;
clear: both; /* The key property to clear floats */
}
Explanation The ::after pseudo-element is fundamental to the "clearfix" hack. It inserts an invisible element after the container and uses clear: both to ensure the container expands to include its floated children, preventing layout breaks.
Example 6: Image Overlays
/* Creates a semi-transparent overlay on an image container */
.image-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
opacity: 0;
transition: opacity 0.4s;
}
.image-container:hover::after {
opacity: 1;
}
Explanation This code applies a dark, semi-transparent overlay to a container on hover. The ::after pseudo-element is stretched to cover its parent by using absolute positioning, a common technique for creating hover effects on images or cards.
Example 7: Custom Blockquote Styling
/* Adds a decorative closing quotation mark */
blockquote::after {
content: '\201D'; /* The right double quotation mark character */
font-size: 3em;
color: #ccc;
position: absolute;
right: 10px;
bottom: -10px;
}
Explanation This enhances a <blockquote> by adding a large, styled closing quotation mark. Using ::after (and often ::before) for quotes ensures they are decorative and not part of the actual text content, improving semantics.