Style Markup for Images as Horizontal Rules and List Item Bullets

These are some things I've been thinking about as I've
been experimenting with styles.  I tried to put them
in a format similar to the w3c tech reports.

Style Markup for Images as Horizontal Rules and List Item Bullets


This document suggests refinements to CSS (a style sheet specification
designed for web documents) to specify images for use as horizontal rules
and list item bullets.


Often images are used as horizontal rules and list item bullets on the
world wide web. At this time, this is usually done by using either line
breaks or definition lists combined with the IMG HTML element. However,
this does not translate well under text-only situations, nor does it really
fit well with the scheme of content-based markup.

In the HTML 3.0 [1] proposal draft, the SRC attribute was added to the <LI>
and <HR> elements for these reasons. However, this was not widely
implemented, nor did it provide a means of specifying the pixel height and
width of the image, which has proved useful in reducing the time necessary
to format the text of an HTML document.

Also, since these attributes modify how an element looks, rather than what
it is, many have commented that they should be part of a style sheet
mechanism, such as the CSS [2] (Cascading Style Sheet) specification. CSS
already contains properties for list elements, but does not provide a means
of specifying the pixel height and width of the image. It is the purpose of
this document to specify a means of designating images to be used as
bullets and horizontal lines within a style sheet by extending CSS.

CSS Properties for Lists

CSS already includes a property for modifying list items: list-style. It
also has the height and width properties to modify block elements. Adding a
pseudo-class called "bullet" would designate that the bullet image is to be
modified by the height and width properties, not the list text.

UL { list-style: URL(http://png.com/ellipse.png) disc }
UL:bullet {
        width: 15px;
        height: 10px;
        color: blue;

The above would specify that the image (ellipse.png) would be 10 pixels
wide by 15 pixels high, and if images aren't available, a blue disc should
be used instead.

CSS Properties for Horizontal Rules

Horizontal rules are a bit different, as there is no property that
specifies a foreground image as list-style does for lists. Thus, the author
suggests the "rule-style" property for this element. This of course opens
up the possibilities for other types of lines, but for now we'll just add
"noshade," which is analogous to the noshade attribute of the HR element in
HTML 3.2 [3]. An example:

HR { rule-style: URL(http://line.com/niceline.png
        width: 15px;
        height: 10px;
        color: blue;


[1]"HyperText Markup Language Specification Version 3.0" by Dave Raggett,
March 1995. http://www.w3.org/pub/WWW/MarkUp/html3/CoverPage.html

[2]"Cascading style sheets" by H
version of this document can be downloaded from

[3]"Introducing HTML 3.2" by Dave Raggett & Dan Connolly, May 96
kon Lie & Bert Bos, May 1996. The latest