Generated Content Basics
Marking and Numbering Sections with CSS3 - Part 2
Forward: In this part of the series, we look at generated content basics.
By: Chrysanthus Date Published: 3 Aug 2012
Introduction
Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.
Pseudo Element and Generated Content
HTML has its elements. HTML elements are elements that are supposed to be used in a web page. Each html element has its content (value or effect). The main thing CSS does is to present these html elements in a better way. However, there are elements, which html does not offer, but can be offered by CSS. Such an element is called a pseudo element, because all elements are supposed to be offered by html. The content of a pseudo element, especially when it can by modified by CSS, is referred to as generated content.
The :before and :after Pseudo Elements
A pseudo element with generated content is placed before or after an html element in a web page. The html element becomes the reference to the pseudo element. When the pseudo element is placed before, it is called a “:before” pseudo element. When it is placed after, it is called an “:after” pseudo element; note the use of the colon in the names.
The content Property
The content of the :before or :after pseudo element is determined by the CSS content property. The value of this property is a small code. I show you the basics of the coding in this series.
In its simplest form the content property is used as follows:
content: string
The string is in double quotes. You have the word, content, immediately followed by a colon, then a space and the string. The string is what (content) the user would see at the browser. This property and value form part of the declaration block of the :before and :after pseudo elements.
The following code illustrates the use of the :before pseudo element and the content property for the html paragraph element. Read and try the code and realize that the :before pseudo element with its content, “Note - ” appears in front of (before) each paragraph element, whose class is “note”.
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<style type="text/css">
p.note:before {content: "Note - "}
</style>
</head>
<body>
<p class="note">You must always be clean.</p>
<p class="note">You must always maintain good hygiene.</p>
<p class="note">You need to have a first aid box in your house for good health.</p>
</body>
</html>
In the style sheet, the word, “note” is the class name. This class name must be the class attribute value in all the html paragraphs that need the pseudo element. In the above code, “note” and “Note - ” are two different things; “Note - ” is string content while “note” is class.
Read and try the following code, which displays the :after pseudo element after the paragraphs that have the class, “caution”
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<style type="text/css">
p.caution:after {content: "- Be careful!"}
</style>
</head>
<body>
<p class="caution">The heads of developed countries are responsible people and so they cannot tell lies.</p>
<p class="caution">Good hygiene will prevent you from having AIDS and so do not border about abstinence.</p>
<p class="caution">The church says we should love one another, so as a woman have confidence and go close to the male pastors and priests.</p>
</body>
</html>
If you have tried the above code, then you should be confident now, with the knowledge, that the :before and :after pseudo elements including their contents are generated by css and inserted before or after the html referenced element respectively.
If you want CSS to generate counting numbers that will number consecutive html elements, then you have to use the CSS counter. These numbers are a kind of generated :before pseudo elements. You can actually customize (make your own) these generated numbers, to solve the problems we saw in the previous part of the series.
The CSS counter is a feature that you do not really code (type out). To use it you need to type, what is called the counter function, as part of the value to the content property. The syntax of the counter function is:
counter(arguments)
You have the word, counter, followed by parentheses. Inside the parentheses you have values called arguments. It is the counter function that you actually type, as value to the content property; you do not type the counter itself.
What is counted?
The complete counting code is in the declaration block of the :before pseudo element of a class in the style sheet. So the HTML elements that are counted and numbered should all be of the same CSS class.
The Main Counter Function Argument
The main counter function argument is the name of your choice, that you give for the counter.
Properties used in Counting
The counter needs to know at what number it needs to start counting. In the previous part of the series, counting began from 1. Counting can begin from any number, for example, 15. CSS has the counter-reset property that determines the number at which counting begins. The syntax for the counter-reset property is:
counter-reset: counterName initialInteger;
The default counter initial integer is zero. If you want this default value, then you do not have to type anything in the initialInteger position, in your code.
Incremented Value
When you are counting in normal life, you are effectively adding 1 to the previous number. CSS has the counter-increment property for this. The syntax is:
counter-increment: counterName incrementInteger;
The default increment is 1. If you want this default value, then you do not have to type anything in the incrementInteger position in your code. Nothing stops you from having an increment of say, 5 as the counter moves to the next number; however, I will not address that in this series.
The counter-reset property is typed in the declaration block of the body element rule set. For this series, we are using the default values; so the following will do:
counter-reset: counterName;
The counter-reset property creates and gives the name of the counter and initializes or resets the counter.
The counter-increment and content properties are typed in the declaration block for the class of the :before pseudo element. Since we are using the default values in this series, the following will do:
counter-increment: counterName;
content: string code with counter(counterName);
Example
Read and try the following code that numbers the paragraphs of the class, “test”:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<style type="text/css">
body {counter-reset: para}
p.test:before
{
counter-increment: para;
content: counter(para) " ";
}
</style>
</head>
<body>
<p class="test">The first paragraph.</p>
<p class="test">The second paragraph.</p>
<p class="test">The third paragraph.</p>
<p>This paragraph does not belong to any class.</p>
</body>
</html>
The " " is a one space character. It is used after the counter function call, to create a space after a number is printed by the browser. The code line that has been used above for this is:
content: counter(para) " ";
Time to take a break. We stop here and continue in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT