content

string

.string li:before{ content:"O"; color:blue;}
.string li li:before{ content:"X"; color:red;}
.string li li li.none:before{ content:none; font-weight:bold;}
.string li li li.normal:before{ content:normal; font-weight:bold;}

• = O
• = O
  • = X
• = O
  • = X
    • = .none = The pseudo-element is not generated.
    • = .normal = Computes to 'none' for the :before and :after pseudo-elements.

uri

.uri:after{ content:url(bgCheck16.gif); background:red;}

.uri =

counter _& counter-increment _& counter-reset

.counter_x li:before{ content:counter(z, decimal); counter-increment:z; color:red;}

.counter_reset li:before{ content:counter(zz, decimal); counter-increment:zz; color:blue;}
.counter_reset ul{ counter-reset:zz;}

.counter_x2 li:after{ content:counter(x2, decimal); counter-increment:x2 2; color:red;}

• 2 =
• 4 =
• 6 =
• 8 =
• 10 =

.counter_x5 li:after{ content:counter(x5, decimal-leading-zero); counter-increment:x5 5; color:blue;}

• 05 =
• 10 =
• 15 =
• 20 =
• 25 =

counters _& counter-increment _& counter-reset

.counters_x li:after{ content:counters(x, ".", decimal); counter-increment:x; color:red;}
.counters_x ul{ counter-reset:x;}

• = 1
• = 2
  • = 2.1
  • = 2.2
• = 3
  • = 3.1
  • = 3.2
    • = 3.2.1
    • = 3.2.2

.counters_xx li:after{ content:counters(xx, "_", decimal-leading-zero); counter-increment:xx; color:blue;}
.counters_xx ul{ counter-reset:xx;}

• = 01
• = 02
  • = 02_01
  • = 02_02
• = 03
  • = 03_01
  • = 03_02
    • = 03_02_01
    • = 03_02_02

attr(<identifier>)

.attr_title:after{ content:attr(title); color:red;}
.attr_lang:after{ content:attr(lang); color:blue;}

I have a title attribute =

en =

open-quote _& close-quote

.quote:before{ content:open-quote; color:red;}
.quote:after{ content:close-quote; color:blue;}

blockquote.quote

no-open-quote _& no-close-quote

.no-quote:before{ content:no-open-quote;}
.no-quote:after{ content:no-close-quote;}

q

q.no-quote