The ::before and ::after pseudo-elements in CSS permits you to insert content onto a page while not eager to be within the hypertext markup language. whereas the tip result’s not truly within the DOM, it seems on the page as if it’s, and would basically be like this:
Before Selector
The CSS ::before selector will be accustomed insert content before the content of the chosen component or parts. it’s employed by attaching ::before to the component it’s to be used on.
Example:-
<!DOCTYPE html>
<html>
<head>
<title>before selector</title>
</head>
<style>
p::before {
content: "* ";
}
span.comment::before {
content: "Comment: ";
color: blue;
}
</style>
<body>
<p> this is before selector</p>
<p> we are learn ::before css add</p>
<span class="comment"> nice sir.</span>
<br><br>
<span> Do. Or do not. There is no try.</span>
</body>
</html>Output:-
*this is before selector
*we are learn ::before css add
comment nice sir.
Do. Or do not. There is no try.
In the example on top of we have a tendency to area unit prepending associate asterisk and an area before each paragraph component on the page. Also, we’re prepending “Comment: ” in blue before each span component with the category comment.
After Selector
The CSS ::after selector may be accustomed insert content when the content of the chosen component or parts. It’s utilized by attaching ::after to the component it’s to be used on.
Example:-
<!DOCTYPE html>
<html>
<head>
<title>after selector</title>
</head>
<style>
.preg::after {
content: "* ";
}
span.comment::after {
content: "Comment: ";
color: blue;
}
</style>
<body>
<p class="preg"> this is after selector</p>
<p class="preg"> we are learn ::after css add </p>
<span class="comment"> nice sir. </span>
<br><br>
<span> Do. Or do not. There is no try.</span>
</body>
</html>Output:-
this is before selector*
we are learn ::before css add*
nice sir. comment
Do. Or do not. There is no try.
What is The After Effect??
If P, Diu, Span Act..to add any CSS after it :: After the effect is used.
