CSS3 Tutorial: pseudo content

Pseudo content

There are many ways to add content (such as text, images, tables, lists, quotes and block-quotes etc) to a web-page: statically (using a keyboard or keypad ) or dynamically (retrieved by a script out of a database, Excel sheet, XML, JSON or text file. Statical text is denoted as hard coded, dynamical content is denoted as soft coded. There is however a third way to create content, namely by means of CSS. This kind of content is what we call CSS-generated content or pseudo-content. An example of pseudo content are the bullets in an unordered list, or numbers in an ordered list. We cannot select these bullets or numbers with the mouse, and we cannot access it with a script. It doesn't exist in the page markup. It doesn't seem to exist at all, except when the page is rendered on the screen. Try it out for yourself and select the numbers in the list below. Say what? I told you!

  1. you can't select my number
  2. ditto
  3. ditto
  4. ditto
    <ol>
    <li>you can't select my number</li>
    <li>ditto</li>
    <li>ditto</li>
    <li>ditto</li>
    </ol>
    

Using pseudo-content we can also replace the numbers or bullets in a list by using a Unicode symbol of choice, other than the default disc, circle, square etc. and without using the list-style-image property. In the example below we find a CSS statement with airplane bullets, made with Unicode:

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
    <style type="text/css">
    ul.aeroplane li { list-style: none; line-height: 1.5em; }
    .unicodebullet { float: left; width: 2em; }
    .u1:before { content: "\2708"; /* Unicode for a airoplane symbol  as bullet */ }
    </style>
    <ul class="aeroplane" >
        <li><span class="unicodebullet u1"></span> Item 1</li>
        <li><span class="unicodebullet u1"></span> Item 2</li>
        <li><span class="unicodebullet u1"></span> Item 3</li>
        <li><span class="unicodebullet u1"></span> Item 4</li>
        <li><span class="unicodebullet u1"></span> Item 5</li>
    </ul>
    

Example 1 Advanced styling of bulleted and numbered lists

HTML includes three kinds of lists: the ordered list, the unordered lists and the definition list (respectively <ol>, <ul> and <dl>). Of these three, the definition list is a stranger in our midst. The children of the ordered list as well as the unordered list consist of <li> elements. The children of the definition list however consist of <dt> and <dd> elements. The <dt> and <dd> elements in a definition list create block-level CSS boxes. <li> elements on he other end create the typical list-item CSS boxes. These list-item CSS boxes are special now, for they contain the characteristics of CSS block-level boxes, as well as the characteristics of a additional CSS box: the so called marker box. Marker boxes have special properties. Firstly, they are no physical structures, but forms of CSS generated content and can therefore be used to create all kinds of crazy styling. Secondly, because they are generated automatically, they cause a certain ease of use. To demonstrate this we give the following,well known, example of a ordered list:

  1. Hi there. I'm first.
  2. Hi there. I'm last.
    <ol>
        <li>Hi there. I'am first. </li>
        <li>Hi there. I'am second.</li>
    </ol>
    

On the screen, the items are automatically numbered with 1,2 etc.. The funny thing is here that if we add an item at the beginning, this item gets number 1 and the counter starts all over again... Apparently there is some kind of an internal counter working. And there is: it is the so called CSS generated counter. With this counter we can exercise control over the way that lists are numbered, like for example counting backwards, counting with even numbers only, etc. We will show some examples of this later on in this tutorial, but first: let us look at some properties of the integrated marker box:

Example 2 Using the integrated marker box styles

There are various standard marker box styles available. In CSS3 there are a great number of marker box styles and we set them them with the CSS list-style-type property. These marker box styles are all keywords that fall in one of the three types: glyphs, numerical systems or alphabetic systems, symbolic, non-repeating, algorithmic and unsupported The disc, circle en square are of type glyphs and when rendered they look as follows:

  • Disc
  • Circle
  • Square
    <ul>
    <li style="list-style: disc">Disc</li>
    <li style="list-style: circle">Circle</li>
    <li style="list-style: square">Square</li>
    </ul>
    
    

Available numerical systems in CSS3 are among other: decimal, decimal-leading-zero, lower-roman, upper-roman, georgian, and armenian. For ordered list the decimal style is mostly used.

  • Decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • georgian
  • armenian
    <ul>
    <li style="list-style: decimal">Decimal</li>
    <li style="list-style: decimal-leading-zero">decimal-leading-zero</li>
    <li style="list-style: lower-roman">lower-roman</li>
    <li style="list-style: upper-roman">upper-roman</li>
    <li style="list-style: georgian">georgian</li>
    <li style="list-style: armenian">armenian</li>
    </ul>
    
    

In addition to numerical systems we can also use the following alphabetic systems: lower-latin (or synonym, lower-alpha), upper-latin (or synonym, upper-alpha), of lower-greek.

  • lower-latin
  • upper-latin
  • lower-greek
    <ul>
    <li style="list-style: lower-latin">lower-latin</li>
    <li style="list-style: upper-latin">upper-latin</li>
    <li style="list-style: lower-greek">lower-greek</li>
    </ul>
    

For longer list the use of numerical systems is preferred over alphabetic system. This because of the fact that CS doesn't describe what should happen when we run out of new letters (we have only 25 in the Latin alphabet)

Example 3 Other HTML elements as CSS list-item box

It is possible to display every markup structure as a CSS list-item box, as in the example below where we transform a serie of paragraphs into an unordered list:

I am a paragraph

I am the second paragraph

I am the third paragraph

I am a the fourth paragraph

    <p style="display: list-item;list-style-type: disc;margin-left: 20px;">I am a paragraph</p>
    <p style="display: list-item;list-style-type: disc;margin-left: 20px;">I am the second paragraph</p>
    <p style="display: list-item;list-style-type: disc;margin-left: 20px;">I am the third paragraph</p>
    <p style="display: list-item;list-style-type: disc;margin-left: 20px;">I am a the fourth paragraph</p>
    

Mind that the counters in the numerical as well as in the alphabetic part are NOT automatically increased as in a ‘real‘ <ol> or <ul> list. So uses only glyphs or background-images for this technique.

Example 4 Replacing list-style-type property in marker boxes for your own custom images .

The list-style-image property makes it possible place your own images instead of the integrated marker box styles. Use a fall-back list-style-type just in case the image can't be loaded (graceful degration).

  • Document 1
  • Document 2
  • Document 3
  • Document 4
    <ul style="list-style-image: url('/wp-content/uploads/preludio/tutorials/css3/pdfbullet.png');
    list-syle-type: disc/* graceful degration to simple bullet if 
    the image is not available*/;">
    <li>Document 1</li>
    <li>Document 3</li>
    <li>Document 3</li>
    <li>Document 3</li>
    </ul>
    

Example 5 Adapting the marker-box position

Positioning marker boxes inside or outside the normal document flow

Using the list-style-position property, you can indicate whether the CSS marker box of a list item should be positioned inside or outside the list-item CSS box.

Example 5.1 Inside

  • At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
    <ul>
    <li style="list-style-type: disc;list-style-position: inside;">
    At vero eos et accusamus et iusto odio dignissimos ducimus 
    qui blanditiis praesentium voluptatum
    </li>
    </ul>
    

Example 5.2 Outside

  • At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
    <ul>
    <li style="list-style-type: disc;list-style-position: outside;">
    At vero eos et accusamus et iusto odio dignissimos ducimus 
    qui blanditiis praesentium voluptatum
    </li>
    </ul>
    

Example 6 Using Unicode and pseudo content to create bullets

For a comprehensive list of Unicode characters see http://en.wikipedia.org/wiki/List_of_Unicode_characters
To utilize these codes, you must escape them, like so: U+27BA Becomes \27BA

The last CSS rule we could also write as follows using the :before pseudo-element in combination with symbol Unicode But be careful here. The list-style-position doesn't work here. That's why we'll have to place the Unicode for the round bullet as pseudo content in a <span> element here, otherwise we could not separate the bullet from the text

  • At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum1
    <style>
    ul.alternative li { list-style: none; line-height: 1.5em; }
    .unicodebullet0 { float: left; width:1em; }
    .u0:before { content: "\2022"; /* Unicode for a check symbol  as bullet */ }
    </style>
    
    <ul class="alternative">
    <li><span class="unicodebullet0 u0"></span>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum1</li>
    </ul>
    

Example 6.1 creating a list with custom bullets (checkmarks)

  • Item 1
  • Item 2
  • Item 3
  • Item 4
    <style>
    ul.alternative{
    1list-style-position: outside;
    }
    
    ul.alternative1 li { list-style: none; line-height: 1.5em;width:150px; }
    .unicodebullet1 { float: left; width: 2em; }
    .u1:before { 
    content: "\2713";/* Unicode for a check symbol  as bullet */
    color:#a7d155;  
	}
    </style>
    
    <ul class="alternative1">
    <li><span class="unicodebullet1 u1"></span>Item 1</li>
    <li><span class="unicodebullet1 u1"></span>Item 2</li>
    <li><span class="unicodebullet1 u1"></span>Item 3</li>
    <li><span class="unicodebullet1 u1"></span>Item 4</li>
    </ul>
    

Example 6.2 creating a list with custom bullets (arrows)

  • Item 1
  • Item 2
  • Item 3
  • Item 4
    <style>
    ul.alternative2 li { list-style: none; line-height: 1.5em;width:150px; }
    .unicodebullet2 { float: left; width: 2em; }
    .u2:before { 
	content: "\279C";
	color:#ff8f8b; 
    }
  
    </style>
    <ul class="alternative2">
    <li><span class="unicodebullet2 u2"></span>Item 1</li>
    <li><span class="unicodebullet2 u2"></span>Item 2</li>
    <li><span class="unicodebullet2 u2"></span>Item 3</li>
    <li><span class="unicodebullet2 u2"></span>Item 4</li>

    

Example 6.3 creating situation-dependent pseudo content

  • Item 1
  • Item 2
  • Item 3
  • Item 4
    <style>
    ul.alternative3{
    }
    
    ul.alternative3 li { list-style: none; line-height: 1.5em;width:150px; }
    .unicodebullet3 { float: left; width: 2em; }
    .u3:before { 
	content: "\279C";
	color:#ff8f8b; 
    }
    ul.alternative3 li.sale:after { 
	content: "  SALE!"; 
	color:#f16529; }

	ul.alternative3 li.new:after { 
	content: "  NEW!"; 
	color:#a7d155; }
    </style>
    
    <ul class="alternative3">
    <li class="new"><span class="unicodebullet3 u3"></span>Item 1</li>
    <li><span class="unicodebullet3 u3"></span>Item 2</li>
    <li class="sale"><span class="unicodebullet3 u3"></span>Item 3</li>
    <li><span class="unicodebullet3 u3"></span>Item 4</li>

    

 

Example 7 Automatically numbering using CSS-generated counters

A CSS counter is a reference by name to a set of elements which have to be counted. The three CSS rules below show how to implement a counter with pseudo content in a ordered list:

    ol {
    list-style-type: none; /* schakel de ingebouwde marker box uit */
    counter-reset: mylist; /* creëer de counter en de naam van 
    de counter (standaard reset waarde = 0: mylist is shorthand voor mylist 0) */
    }

    ol li { 
    counter-increment: mylist; 
    } 
    /* verhoog de counter bij elk  list item. (standaard met 1: mylist is shorthand voor mylist 1) */ 
     
    ol li:before { 
    content: counter(mylist) ". "; 
    } 
    /* toon de counters value */
     

We are looking at two new properties, namely counter-reset and counter-increment, and one new value: counter(). Together they form the building blocks of a CSS counter. All CSS counter follow identical basis patterns: reset, increment and render(in this order).
The counter-reset property initializes a new counter with a name (here: mylist).
The counter-increment property defines when and with what steps the counter must be increased (or decreased).
Finally he counter() function is used to activate the counter.

By using different values for counter-reset and counter-increment you can achieve different list numberings, as demonstrated in the examples below:

Example 7.1 Start counting at five and increase with two each time

    ol {
    list-style-type: none;
    counter-reset: mylist 3; /* start counting at 4 */
    }
    ol li { 
    counter-increment: mylist 2;/* increase continuously with  2 */ 
    }
    ol li:before { 
    content: counter(mylist) ". "; 
    }
    
CSS counter

Example 7.2 Count with even numbers :

    ol {
    list-style-type: none;
    counter-reset: mylist;
    }
    ol li { 
    counter-increment: mylist 2; 
    } /* ease each time with  2 */
    ol li: before { 
    content: counter(mylist) ". " ; 
    }
    
CSS counter even getallen

Example 7.3 Count with odd numbers :

    ol {
    list-style-type: none;
    counter-reset: mylist -1;/* start counting at  1 */
    }
    ol li { 
    counter-increment: mylist 2; 
    } /* increase each time with  2 */
    ol li: before { 
    content: counter(mylist) ". " ; 
    }
    
CSS counter even getallen

Example 7.4 Count down:

    ol {
    list-style-type: none;
    counter-reset: mylist -1;/* start counting at 10 */
    }
    ol li { 
    counter-increment: mylist -1; 
    } /* decrease each time with  2 */
    ol li: before { 
    content: counter(mylist) ". " ; 
    }
    
CSS counter even getallen

Example 7.5 Count down with characters:

    ol {
    list-style-type: none;
    counter-reset: mylist 27;/* start counting at the 26th letter in the alphabet */
    }
    ol li { 
    counter-increment: mylist -1; 
    } /* decrease each time with  2 */
    ol li: before { 
    content: counter(mylist, lower-latin) ". " ; 
    }
    
CSS counter even getallen

Leave a comment