:after
In this chapter you will learn:
- Definition for Selector :after
- An example showing how to use :after CSS selector
- How to add content after list item
- How to add after content for a class
Description
The :after selector
inserts content after the selected elements.
Example
<!DOCTYPE html><!--from j av a 2 s.c o m-->
<html>
<head>
<style>
p:after{
content:"added after";
}
</style>
</head>
<body>
<p>this is a paragraph.</p>
</body>
</html>
Adding after content for list
<!DOCTYPE HTML><!-- j a v a2s . c o m-->
<html>
<head>
<style type="text/css">
li:after {
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>
after content for a class
The following code adds after content for class named last.
<!DOCTYPE HTML><!--from ja v a 2 s .c o m-->
<html>
<head>
<style type="text/css">
li.last:after {
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>
Next chapter...
What you will learn in the next chapter:
Home » HTML CSS Tutorial » CSS Selector Reference