Generated Content Properties & List Properties


PropertyDescriptionPossible ValuesExamples
contentGenerates content in the document in conjunction with the and pseudo-elements.String values, URL values, and predefined value formats:

counter(name)
counter(name, list-style-type)
counters(name, string)
counters(name, string, list-style-type)
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote

div:before { content:"some text"; }

div:after { content:url(page2.html); }

counter-incrementDeclares the counter increment for each instance of a selector.Integers and the predefined value .More Information
counter-resetDeclares the value the counter is set to on each instance of a selector.Integers and the predefined value .More Information
quotesDeclares the type of quotation marks to use for quotations and embedded quotations.String values and the predefined value .More Information



List Properties



PropertyDescriptionPossible ValuesExamples
list-style-typeDeclares the type of list marker used.
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
ol { list-style-type:upper-roman; }

ul { list-style-type:square; }

list-style-positionDeclares the position of the list marker.
inside
outside
ol { list-style-position:inside; }

ul { list-style-position:outside; }

list-style-imageDeclares an image to be used as the list marker.URL values.
ul { list-style-image:url(image.jpg); }
list-styleShorthand property to declare three list properties at once.Separate values by a space in the following order (those that are not defined will use inherited or default initial values):

list-style-type
list-style-position
list-style-image

ul { list-style:disc inside url(image.gif); }

ol { list-style:upper-roman outside; }

marker-offsetDeclares the marker offset for elements with a value of set for the property.Lengths and the predefined value .
li:before { display:marker; marker-offset:5px; }

Back to Learn More about CSS