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;}


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;}

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


counters & counter-increment & counter-reset

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

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


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


CSS Practice