CSS Selector :after
Description
The :after selector
inserts content after the selected elements.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p:after{<!--from w w w .j ava 2s . c o m-->
content:"added after";
}
</style>
</head>
<body>
<p>this is a paragraph.</p>
</body>
</html>
The code above generates the following result.
Adding after content for list
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li:after {<!-- www . j ava 2 s.c o m-->
content: ", ";
}
</style>
</head>
<body>
<ul>
<li>Database</li>
<li>Privacy</li>
<li>Best</li>
<li>Whatever</li>
<li class="last">Make One</li>
</ul>
</body>
</html>
The code above generates the following result.
after content for a class
The following code adds after content for class named last.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li.last:after {<!--from w w w.j a v a 2 s .com-->
content: ".";
}
</style>
</head>
<body>
<ul>
<li>Database</li>
<li>Privacy</li>
<li>Best</li>
<li>Whatever</li>
<li class="last">Make One</li>
</ul>
</body>
</html>
The code above generates the following result.
