CSS ::after Selector
::after selector is used to add the same content multiple times after the content of other elements. This selector is the same as ::before selector.
Syntax:
::after{
content:
}
Below HTMl/CSS code shows the functionality of ::after selector :
<!DOCTYPE html>
<html>
<head>
<style>
p::after {
content: " - Remember this";
background-color: blue;
}
</style>
</head>
<body>
<h3>After Selector</h3>
<p>User ID: @dmor1</p>
<p>Name: dharam</p>
</body>
</html>
Output:
Supported Browsers
- Google Chrome 1.0
- Edge 12.0
- Firefox 1.5
- Safari 4.0
- Opera 7.0
Note: Opera 4-6 supports with single-colon.(:after)
CSS ::after Selector – FAQs
What does the ::after selector do in CSS?
The ::after selector inserts content after the content of a selected element, often used for adding decorative or stylistic elements.
How do I use the ::after selector to add content?
To use ::after, you need to define the content property, like p::after { content: ‘✔’; } to add a checkmark after each paragraph.
Can the ::after selector create elements visible on the page?
Yes, the ::after selector can be styled with CSS properties like color, background, display, etc., to create visible pseudo-elements on the page.
Is the content generated by ::after selectable or accessible?
Content created with ::after is generally not selectable or accessible by screen readers, depending on the content and browser.
Can ::after be used with all HTML elements?
The ::after pseudo-element can be used with most HTML elements, but it does not apply to replaced elements like <img>, <input>, or <iframe>.
