Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

marker-offset

The marker-offset property specifies the horizontal offset between a marker box and the tag's content box. No, I don’t understand it either. Still, here goes….

Most tags generate one box (you remember the box model don't you?). The box is the area of space that the tag takes up when the browser displays it. It includes margins, padding and borders.

However, you can make a tag generate two boxes: one box for the tag’s content and a separate marker box for a decoration such as a bullet, a picture, or a number. You can then put the marker box inside or outside the tag’s main box. It works a bit like a list item except you have more control.

You can use markers with counters to create new list styles, to number margin notes, and much more.

The first thing you need to do is set the display property for the tag to marker. You can then use :before and after :pseudo to position the marker and the various content properties to set up what the marker looks like.

The following example sows how you might use markers to add full stops after each numbered list item:

li:before {display: marker;
           marker-offset: 3em;
           content: counter(mycounter, lower-roman) ".";
           counter-increment: mycounter;

Alternatively, create a class for a paragraph that you can use to place notes in your page. Each time you use such a paragraph, it will be preceded by the word "Note" and a numeric value corresponding to the note number. For example:

 P.note:before {display: marker;
                content: "Note " counter(note-counter) ":";
                counter-increment: note-counter;
                text-align: left;
                width: 10em;}

These properties create a marker element before any <p> tag with the class=note. The content of the marker is the word "Note" followed by the value of the note-counter and a colon. The marker will appear before the paragraph, with its content left aligned in an area 10 ems wide. After each note paragraph, the note counter increments.

You can (when it finally works) generate almost any kind of marker, for example, specialized equation numbers and line counters for legal briefs.

I wouldn't try to make markers too complicated or long. They are meant to be quite small.