Academic Tutorials

English | French | Portugese | German | Italian
Home Advertise Payments Recommended Websites Interview Questions FAQs
News Source Codes E-Books Downloads Jobs Web Hosting

CSS 2.0
CSS 2.0 Introduction
CSS 2.0 Attaching Style
CSS 2.0 Applying Style
CSS 2.0 Key Concepts
CSS 2.0 Color Contents
CSS 2.0 Fonts Contents
CSS 2.0 Text
CSS 2.0 Lists
CSS 2.0 the box model
CSS 2.0 Advanced concepts
CSS 2.0 Positioning
CSS 2.0 Boxes
CSS 2.0 Generated content
CSS 2.0 Dynamic effects
CSS 2.0 Tables
CSS 2.0 Paged media
CSS 2.0 Font Face
CSS 2.0 Aural Style Sheets
CSS 2.0 Language styles

HTML Tutorials
HTML Tutorial
XHTML Tutorial
CSS Tutorial
TCP/IP Tutorial
CSS 1.0
CSS 2.0
XML Tutorials
XML Tutorial
XSL Tutorial
XSLT Tutorial
DTD Tutorial
Schema Tutorial
XForms Tutorial
XSL-FO Tutorial
XML DOM Tutorial
XLink Tutorial
XQuery Tutorial
XPath Tutorial
XPointer Tutorial
RDF Tutorial
SOAP Tutorial
WSDL Tutorial
RSS Tutorial
WAP Tutorial
Web Services Tutorial
Browser Scripting
JavaScript Tutorial
VBScript Tutorial
DHTML Tutorial
HTML DOM Tutorial
WMLScript Tutorial
E4X Tutorial
Server Scripting
ASP Tutorial
PERL Tutorial
SQL Tutorial
ADO Tutorial
Apple Script
PL/SQL Tutorial
SQL Server
.NET (dotnet)
.Net Mobile
C# : C Sharp
SVG Tutorial
Flash Tutorial
Media Tutorial
SMIL Tutorial
Photoshop Tutorial
Gimp Tutorial
Gnuplot Programming
GIF Animation Tutorial
Scientific Visualization Tutorial
Web Building
Web Browsers
Web Hosting
W3C Tutorial
Web Building
Web Quality
Web Semantic
Web Careers
Weblogic Tutorial
Web Site Hosting
Domain Name
Java Tutorials
Java Tutorial
JSP Tutorial
Servlets Tutorial
Struts Tutorial
EJB Tutorial
JMS Tutorial
JMX Tutorial
Programming Langauges
C Tutorial
C++ Tutorial
Visual Basic Tutorial
Data Structures Using C
Assembly Language
Forth Programming
Lisp Programming
Data Warehousing
CGI Programming
Emacs Tutorial
Soft Skills
Communication Skills
Time Management
Project Management
Team Work
Leadership Skills
Corporate Communication
Negotiation Skills
Database Tutorials
Operating System
Software Testing
SAP Module
Business Warehousing
SAP Basis
Material Management
Sales & Distribution
Human Resource
Customer Relationship Management
Production and Planning
Networking Programming
Corba Tutorial
Networking Tutorial
Microsoft Office
Microsoft Word
Microsoft Outlook
Microsoft PowerPoint
Microsoft Publisher
Microsoft Excel
Microsoft Front Page
Microsoft InfoPath
Microsoft Access
Financial Accounting
Managerial Accounting
Network Sites

CSS 2.0 Properties - Generated content

Previoushome Next

CSS2 Properties - Generated content


Generated content

There are three principal types of content; firstly, replaced content, secondly non-replaced content, and thirdly non-replaced content. Here is an illustration of each in HTML.

Some non-replaced content - directly used

<IMG src="green.gif"> <!-- Some replaced content - the IMG reference is replaced by an image. -->

Some non-replaced content that will be preceded by some generated content - the list marker.

Generated content thus includes such things as list item markers in HTML. HTML only includes very basic generated content, but CSS provides a much richer array of properties to specify generated content.

:Before and :after pseudo-elements

Typically, generated content consists of putting a piece of content before or after an element (e.g., a list marker before a list item). To cater for this, CSS provides the :before and :after pseudo-elements. For example, P:before {content: "J"} specifies that P elements should be preceded by a J.

In addition to specifying the content that precedes or follows an element, the :before and :after selectors are also used to specify the formatting of that content; for example, P:before {content: "J"; color: red} would make the 'J' before the element red.

It should be noted that for the purposes of first line and first letter, before is assumed to be the start of the element.

Note that :before and :after inherit style from the element itself so if the element is red then its generated content will also be read.

Subsequent elements consider generated content to be part of the element. Thus:

The <SPAN></SPAN> sat on the log.
SPAN:after {content: "dog"}

Would be rendered in exactly the same way as:

The dog sat on the log.

Valid values for display on :before and :after

If the element to which :before or :after is applied is a block-level (i.e., table, list-item, compact, run-in or block) element, display may be set to none, inline, block, or marker. Any other value for display will be reset to block.

Inline elements may only have display set to none or inline, with other values reset to inline.

Compact elements with generated content

  1. A compact element that has an inline :before or :after takes it into account when the size of the element's box is considered, and it is included in the same block box as the element.

    DIV:after {display: inline;
    /* Assuming a width of 30% */}
    DIV {display: compact;
    /* Assuming a width of 30% */}
    P {margin-left: 50%}

    In this example, the DIV has a width of 60%, and therefore cannot fit

  2. A compact element that has a block :before pseudo-element has the pseudo-element formatted as a block above the element.

    DIV:before {display: block;
    width: 30%}
    DIV {display: compact;
    /* Assuming a width of 30% */}
    P {margin-left: 50%}

    In this example, the DIV has a width of 30%, and therefore fits.

  3. A compact element that has an block :after pseudo-element has the two elements formatted as separate block elements.

    DIV:after {display: block;
    width: 30%}
    DIV {display: compact;
    /* Assuming a width of 30% */}
    P {margin-left: 50%}

    In this example, the DIV has a width of 30%, and therefore fits.

  4. Where an element following a compact element has a block :before, the compact element considers the :before pseudo-element.

    DIV {display: compact;
    /* Assuming a width of 30% */}
    P:before {display: block;
    margin-left: 50%}

    In this example, the DIV has a width of 30%, and therefore fits.

  5. Where an element following a compact element has an inline :before, the formatting of the compact element depends on display of the element to which the :before is attached.

    DIV {display: compact;
    /* Assuming a width of 30% */}
    P:before {content: url(green.gif);
    display: inline;
    width: 30%}
    P {margin-left: 50%}

    In this example, since the :before content is inline, it is positioned inside the P, and there is therefore enough room for the DIV.

Counter functions

Although we have already seen that CSS can generate content that is always the same, it also provides the ability for counter functions. Essentially these are the same as list items except they allow for more advanced numbering schemes.

There are basically five issues relating to counters:

  1. The name of the counter function - used to identify the counter so that references can be made to it.
  2. The increment of the counter - is it 1, 2, 3 or 1, 7, 13?
  3. The initial value of the counter - is it 1, 2, 3 or 126, 127, 128?
  4. The trigger to reset the counter to its initial value.
  5. The way in which the counter is formatted - is it 1, 2, 3 or i, ii, iii?

1. Naming counter functions

In order to refer to counter functions, you specify something like P {content: counter(myCounter)}. Note that counter names are, as with all CSS, case-insensitive.

2. Incrementing counter functions

In order to specify the increment of a counter function, you use the counter-increment property. This property specifies the increment of a counter on encountering an instance of an element. The initial value is 'none', so initially no element increments a counter.

To specify an increment, you declare the name of the counter function followed by the increment (which can be any integer). For example, H1 {counter-increment: HeadingCounter 1}. If the increment is omitted, 1 is assumed, so H1 {counter-increment: HeadingCounter} is also valid.

If you wish to specify that an element should increment more than one counter function, simply separate them with spaces. For example, H1 {counter-increment: HeadingCounter 10 HeadingCounter2}.

Counter-increment is not inherited. It applies to all elements.

Note that counter values are used after any increment specified for that element.

3. Initial values and counter resets

To specify the element that resets a counter function, the counter-reset property is used.

It follows an identical syntax to counter-increment. It is used to reset the given counter to the given number (if a number is omitted, 0 is assumed).

Counter-reset is not inherited. Its initial value is 'none'. It applies to all elements.

Here's an example: H1 {counter-reset: counter1 counter2 -26} (this would reset counter1 to 0 and counter2 to -26).

Like counter-increment, counter-reset may only be set to integer values.

Note that counter values are used after any reset specified for that element, and that counters are incremented after they have been reset. Thus H1:before {counter-reset: counter; counter-increment: counter; content: counter(counter)} would result in 1 since it would first be reset, then incremented, and then finally used.

The effect of descendant elements on counter-reset

Counter-reset only affects sibling and descendant elements. For example:

OL {counter-reset: licounter}
LI {content: counter(licounter);
counter-increment: licounter}

<OL> - licounter reset to 0
<LI> - licounter incremented to 1
<LI> - licounter incremented to 2
<LI> - licounter incremented to 3
<LI> - licounter incremented to 4
<OL> - licounter reset to 0, but since counter-reset only affects siblings and descendants, this won't affect the old counter
<LI> - licounter incremented to 1
<LI> - licounter incremented to 5

4. Counter styles

Once you have a counter function, you will probably want to style it. This is done using counter(). For example, P:before {content: counter(counter, lower-alpha); counter-increment: counter} with <P>Hello <P>Hello would be rendered as:



Thus the counter function can be followed by a list style type, which will convert the integer into a value. Thus if the counter function was running at 26, z would be rendered. If the list type is unordered, it will always result in the same thing - content: counter(counter, disc) would always result in a disc.


This property is used in conjunction with the :before and :after pseudo-elements to provide generated content.

In its simplest form, content is a string; e.g., :before {content: "Hello"}, which would cause Hello to appear before every element.

However, the content can also be set to a keyword, such as open-quote.

Valid values are (one or more of each)

  1. a string of text enclosed within quote marks (such as content: "My text")
  2. an external resource, designated by url(resourcename.type), e.g., content: url(green.gif)
  3. a counter function, e.g., content: counter(counterfunct, decimal)
  4. a compound counter function. Compound counter functions are used for situations like this:



    They take the following form - content: counters(mycounter, "string", type) or content: counters(mycounter, "string"). Essentially, the number used is the level of the counter - in


    , the result would be 1 for the outermost, 1.1 for the next one in, and 1.1.1 for the next one in from that (given content: counters(mycounter, ".")).

  5. attr(x), where x is the name of the attribute (such as title in <IMG title="A picture of my zucchini">; attr(title) would return "A picture of ...")
  6. open-quote
  7. close-quote
  8. no-open-quote
  9. no-close-quote

Its initial value is "", and it applies only to :before and :after. It is not inherited.

You can specify several items of content. For example, content: "(" counter(counterfunction, lower-alpha) ".) " would result in (a.) , (b.) , (c.) , etc.

The open-quote are used to specify that the language-appropriate quotation mark should be inserted. For example, Q:before {content: open-quote} Q:after {content: close-quote}. The appropriate quotation mark can be set using the quotes property. Since this allows different levels of quotes (e.g., She said, "He was so rude - he said, 'Go away'"), the purpose of no-open-quote and no-close-quote is to decrement or increment the quote level without actually inserting quotes.

For example:

BLOCKQUOTE P:before {content: open-quote}
BLOCKQUOTE P:after {content: no-close-quote}
BLOCKQUOTE P.last:after {content: close-quote}


Some text from a quote.
Another paragraph from a quote.
<P class="last">
The final paragraph from a quote.

Would result in:

'Some text from a quote.
'Another paragraph from a quote.
'The final paragraph from a quote.'

Initially, content is "". It is not inherited.


This property instructs the web browser on the appropriate method of displaying the aforementioned open-quote and close-quote, and can take one of the following values: none (don't render open-quote and close-quote); one or more sets of quotation marks, where the first quote mark is the opening quote mark, the second the closing quote mark; if more than one set of quotes is specified, the first set applies to the first set of open quote marks, the second to the second set, etc. The initial value is browser dependent. Quotes is inherited.

For example:

Q {quotes: '"' '"' "'" "'" }

Q:before {content: open-quote}
Q:after {content: close-quote}


Markers are used to create effects such as:

  1. A list item
  2. A list item

Without them, you could only do something like.

9. A list item
10. A list item

Thus they allow you to line text up correctly. They are specified using display: marker, and are only valid in association with the :before and :after pseudo-elements.

In order to this, marker boxes are placed outside the border edge of an element (i.e., in the element's margin). This means that BODY, LI, OL {margin: 0} would result in the marker boxes being pushed off the left of the canvas.

Marker boxes may not have margins, but they may have padding and borders.

For example:

OL {margin: 0;
background: red;
counter-reset: counterfunc}
LI {margin-left: 5%;
background: green}
LI:before {display: marker;
marker-offset: auto
content: counter(counterfunc);
counter-increment: counterfunc}

Results in a green background for the content of the LI, and red for the marker, since the marker is placed in LI's margin.

Only block-level elements may have display: marker. Block-level elements are tables, list-items, block, compact and run-in elements.

Note that when list items have :before set to display, display is set to block.

Height and alignment of marker boxes

The height of marker boxes is determined by line-height, and the marker box is taken into consideration for the purposes of calculating the height of the line box with which it is aligned in the principal box.

If applied on :before, the baseline of the marker is aligned with the baseline of the first line of content in the principal box. If there is no such content in the principal box, the top of the marker is aligned with the top of the principal box.

If applied on :after, the baseline of the marker is aligned with the baseline of the last line of content in the principal box. If there is no such content in the principal box, the bottom of the marker is aligned with the bottom of the principal box.

Inheritance into marker boxes

As with other pseudo-elements, marker box inherit inheritable style; for example, given:

ELEMENT {color: red;
background: green}
ELEMENT:before {display: marker}

, the marker box would have red text; it would not have a green background, because backgrounds are not inherited.

List items as markers

Note that list items as specified via the LI element are markers - when you set ELEMENT {display: list-item}, you are effectively setting ELEMENT {display: block} ELEMENT:before {display: marker; content: counter(function); counter-increment: function}.

As a result, elements with display: list-item must have margins in which to place the counter.

In addition, given LI {background: red}, the marker box will not be red since background is not inherited. To see whether this is correctly followed in your browser, have a look at this:

  1. A list item
  • A list item


This property specifies the distance between the border edge of the marker box and the border edge of the thing that it is marking to be specified.

It can be specified as a length (including negative lengths) or as auto but not a %. It is not inherited and is intially auto (= UA defined).

Be the first one to comment on this page.

  CSS 2.0 eBooks
More Links » »
 CSS 2.0 FAQs
More Links » »
 CSS 2.0 Interview Questions
More Links » »
 CSS 2.0 Articles

No CSS 2.0 Articles could be found as of now.

 CSS 2.0 News

No News on CSS 2.0 could be found as of now.

 CSS 2.0 Jobs

No CSS 2.0 Articles could be found as of now.

Share And Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • blinkbits
  • BlinkList
  • blogmarks
  • co.mments
  • connotea
  • digg
  • Fark
  • feedmelinks
  • Furl
  • LinkaGoGo
  • Ma.gnolia
  • NewsVine
  • Netvouz
  • RawSugar
  • Reddit
  • scuttle
  • Shadows
  • Simpy
  • Smarking
  • Spurl
  • TailRank
  • Wists
  • YahooMyWeb

Previoushome Next

Keywords: CSS2 Properties - Generated content, CSS2, css2, CSS2 tutorial, CSS2 tutorial pdf, history of CSS2, Custamizing Style Sheet, learn CSS2

HTML Quizzes
CSS Quiz
CSS 1.0 Quiz
CSS 2.0 Quiz
XML Quizzes
XML Quiz
XSL Quiz
DTD Quiz
Schema Quiz
XForms Quiz
XLink Quiz
XQuery Quiz
XPath Quiz
XPointer Quiz
RDF Quiz
RSS Quiz
WAP Quiz
Web Services Quiz
Browser Scripting Quizzes
JavaScript Quiz
VBScript Quiz
WMLScript Quiz
E4X Quiz
Server Scripting Quizzes
ASP Quiz
SQL Quiz
ADO Quiz
CVS Quiz
Python Quiz
Apple Script Quiz
SQL Server Quiz
PHP Quiz
.NET (dotnet) Quizzes
Microsoft.Net Quiz
ASP.Net Quiz
.Net Mobile Quiz
C# : C Sharp Quiz
VC++ Quiz
Multimedia Quizzes
SVG Quiz
Flash Quiz
Media Quiz
Photoshop Quiz
Gimp Quiz
Matlab Quiz
Gnuplot Programming Quiz
GIF Animation Quiz
Scientific Visualization Quiz
Graphics Quiz
Web Building Quizzes
Web Browsers Quiz
Web Hosting Quiz
W3C Quiz
Web Building Quiz
Web Quality Quiz
Web Semantic Quiz
Web Careers Quiz
Weblogic Quiz
SEO Quiz
Web Site Hosting Quiz
Domain Name Quiz
Java Quizzes
Java Quiz
JSP Quiz
Servlets Quiz
Struts Quiz
EJB Quiz
JMS Quiz
JMX Quiz
Eclipse Quiz
J2ME Quiz
Programming Langauges Quizzes
C Quiz
C++ Quiz
Visual Basic Quiz
Data Structures Using C Quiz
Cobol Quiz
Assembly Language Quiz
Mainframe Quiz
Forth Programming Quiz
Lisp Programming Quiz
Pascal Quiz
Delphi Quiz
Fortran Quiz
OOPs Quiz
Data Warehousing Quiz
CGI Programming Quiz
Emacs Quiz
Gnome Quiz
ILU Quiz
Soft Skills Quizzes
Communication Skills Quiz
Time Management Quiz
Project Management Quiz
Team Work Quiz
Leadership Skills Quiz
Corporate Communication Quiz
Negotiation Skills Quiz
Database Quizzes
Oracle Quiz
MySQL Quiz
Operating System Quizzes
BSD Quiz
Symbian Quiz
Unix Quiz
Internet Quiz
IP-Masquerading Quiz
IPC Quiz
Software Testing Quizzes
Testing Quiz
Firewalls Quiz
SAP Module Quizzes
ERP Quiz
Business Warehousing Quiz
SAP Basis Quiz
Material Management Quiz
Sales & Distribution Quiz
Human Resource Quiz
Netweaver Quiz
Customer Relationship Management Quiz
Production and Planning Quiz
Networking Programming Quizzes
Corba Quiz
Networking Quiz
Microsoft Office Quizzes
Microsoft Word Quiz
Microsoft Outlook Quiz
Microsoft PowerPoint Quiz
Microsoft Publisher Quiz
Microsoft Excel Quiz
Microsoft Front Page Quiz
Microsoft InfoPath Quiz
Microsoft Access Quiz
Accounting Quizzes
Financial Accounting Quiz
Managerial Accounting Quiz
Testimonials | Contact Us | Link to Us | Site Map
Copyright 2008. Academic All rights reserved Privacy Policies | About Us
Our Portals : Academic Tutorials | Best eBooksworld | Beyond Stats | City Details | Interview Questions | Discussions World | Excellent Mobiles | Free Bangalore | Give Me The Code | Gog Logo | Indian Free Ads | Jobs Assist | New Interview Questions | One Stop FAQs | One Stop GATE | One Stop GRE | One Stop IAS | One Stop MBA | One Stop SAP | One Stop Testing | Webhosting in India | Dedicated Server in India | Sirf Dosti | Source Codes World | Tasty Food | Tech Archive | Testing Interview Questions | Tests World | The Galz | Top Masala | Vyom | Vyom eBooks | Vyom International | Vyom Links | Vyoms | Vyom World
Copyright 2003-2017 Vyom Technosoft Pvt. Ltd., All Rights Reserved.