Advanced Text Functions in CSS

Advanced Text

1. CSS allows you to go beyond simple text formatting to do some very useful things in working with text. It allows you to create text on the fly, so that regularly repeated elements can become part of the document automatically through the style sheet, rather than having to be physically included in each document.
2. CSS also allows for some advanced list processing. We will touch on these features here in the context of looking at the :before pseudo-element.

Advanced Lists

1. Let's start with lists.
2. If your browser supports advnaced list handling properties in CSS, then all of the paragraphs so far should be showing up as an ordered list, each one preceeded by the string "_____ #. ) ".

As you will note, I can even stop the list with other material, like this paragraph, or the heading above, and when I come back to it ...

1. It picks up right where it left off.

The code that does this looks as follows. Note that I have this entire document enclosed in a division assigned a class of "advcss", so that these style rules are all specific to this document.

/* advanced CSS examples */

.advcss ol { list-style-type: none;}
div.advcss > ol > li { margin-top: 1.5em; }

div.advcss {counter-reset: itemnr; } 
div.advcss > ol > li:before 
  { 
  content: "_____ " counter(itemnr,  decimal) ". )  "; 
  counter-increment: itemnr; 
  display: marker;
  }

So let us look at what this does.

Lists with :before

:before and :after are pseudo-elements. They refer not to specific elements, but to the beginning and end of a specified element. You can use them to insert content at the beginning and end of an element, respectively.

This paragraph is a simple example of their use.

div.advcss p.befex:before { 
  content: "BEGIN SIMPLE EXAMPLE --";
  display: block;
  }

In this document, if you look at the CSS code, what I have done is turned of the list elements markers for my ordered list with the statement .advcss ol { list-style-type: none; }. I have then created a new list element marker with the more complex statement:

div.advcss > ol > li:before 
  { 
  content: "_____ " counter(itemnr,  decimal) ". )  "; 
  counter-increment: itemnr; 
  display: marker;
  }

This says that for all ordered list elements where the ordered list is a direct descendent of the division assigned the class of "advcss", I want the specified content inserted before each item. Moreover, each time that content is inserted I have a counter that I increment by one, and the content being inserted before is being defined as a content type of marker. A marker is a bullet or number that preceeds a list item.

Let's look at each element in turn.

content: string;

Using :before or :after requires the use of this property. It is where you define what is being inserted before or after. It can take literals and variables as a value. Literals go inside quote marks. Variables do not.

The property can be used to insert any string, so it could be used, for instance, to prefix all divisions of a specific class with a standard disclaimer, or a copyright statement. The field is wide open.

The only variable currently supported is counter.

It is actually a function that takes two arguments, the variable storing the counter value, and the formatting specification, and returns a string that is the current item number. In this case our counter is named itemnr and it is being formatted as decimal, the same value as for list-style-type.

The string reads five underscores followed by a space, then the counter value, followed by dot, space, right parentheses, and spaces, or "_____ #. ) "

counter-increment: itemnr

counter-increment: is a property that allows you to specify a variable to store a counter, and specify when to increment it. How does it know when to increment. Well, each time the browser encounters an element to which this style rule is applied, in this case, an item in an ordered list, the counter is incremented.

If you want to reset the counter at some point, you can also use counter-reset: followed by the name of the counter variable in a style rule that applies to when to reset the counter. For instance, each time you encounter an <h2> element, it may constitute a new document section where you want to restart the counter.

In this document the counter is restarted each time I start a new division with a class of advcss. Since there is only one such division, the style rule to reset the counter is more for good coding style than actual functionality.

display: marker;

For the included content to be display properly, you need to specify how it is to be displayed. Normally it should default to a valid display type without problem, but it never hurts to specify. In this case, the default would be as inline content. But I don't want it to be inline content, I want it to be a list item marker. Therefore I have to specify what the display type is. We talk about display types in the CSS Tag Classification section.