How to control after in CSS

In CSS, we often use the ::after pseudo-element to create a virtual container for an element and achieve special effects. This article will detail how to use the ::after pseudo-element to control the style and behavior of an element.

What is the `::after` pseudo-element?

::after is a CSS pseudo-element used to insert content after an element’s content. It is not a real HTML element, but rather a generated element in CSS.

The syntax for using the ::after pseudo-element is as follows:

.element::after {
content: " ";
display: block;
width: 100px;
height: 100px;
background-color: red;
}

In the above example, we insert a 100px red block after the content of the .element element.

Controlling Content Insertion

By setting the content property, we can control the content inserted by the ::after pseudo-element. This can be a string, an image URL, or some other CSS property.

Insert a text element

.element::after {
content: "This is a text element";
}

Insert an image element

.element::after {
content: url('https://coder-cafe.com/wp-content/uploads/2025/09/image.jpg');
}

Insert a blank element

.element::after {
content: " ";
}

Controlling styles

In addition to controlling inserted content, we can also use CSS properties to control the style of the ::after pseudo-element to achieve various effects.

Controlling Position

By setting the position property, we can control the position of the pseudo-element.

.element::after {
content: " ";
position: absolute;
top: 0;
left: 0;
}

Controlling Size and Shape

By setting the width and height properties, we can control the size of the pseudo-element.

.element::after { 
content: " "; 
display: block; 
width: 100px; 
height: 100px; 
}

Controlling the Background

By setting the background property, we can control the background style of the pseudo-element.

.element::after {
content: " ";
display: block;
background-color: red;
}

Controlling Borders and Corner Radius

By setting the border and border-radius properties, we can control the border and corner radius of the pseudo-element.

.element::after {
content: " ";
display: block;
border: 1px solid black;
border-radius: 50%;
}

Controlling Animation

By setting the animation property, we can add animation effects to pseudo-elements.

@keyframes spin { 
from { 
transform: rotate(0deg); 
} 
to { 
transform: rotate(360deg); 
} 
} 

.element::after { 
content: " "; 
display: block; 
animation: spin 2s linear infinite; 
}

Controlling Behavior

In addition to styling, we can also control the behavior of the ::after pseudo-element using some special properties.

Controlling Clickability

By setting the pointer-events property, we can control whether the pseudo-element is clickable.

.element::after {
content: " ";
display: block;
pointer-events: none;
}

Controlling Hierarchy

By setting the z-index property, we can control the hierarchy of pseudo-elements.

.element::after {
content: " ";
display: block;
z-index: -1;
}

Sample Code

Here is a sample code using the ::after pseudo-element to create a button with an arrow:

<!DOCTYPE html>

<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Button with Arrow</title> 
<style> 
.button { 
display: inline-block; 
padding: 10px 20px; 
background-color: #3498db; 
color: #fff; 
position: relative; 
text-transform: uppercase; 
} 

.button::after { 
content: " "; 
display: block; 
width: 0; 
height: 0; 
border-style: solid; border-width: 10px 8.66px 0 8.66px;
border-color: #3498db transparent transparent transparent;
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>

<body>
<button class="button">Click Me</button>

</body>

</html>

In this example, we use the ::after pseudo-element to add a downward-pointing arrow to a button. The button is set to position: relative, and the arrow is positioned relative to the button.

Conclusion

Through this article, we learned how to use the ::after pseudo-element to control the style and behavior of an element. The ::after pseudo-element allows us to achieve more complex effects without adding additional HTML elements.