List Styling, Generated Content, and Counters

list-style-type Property

Property	Usage and Effect	Values	Recommendations
list-style-type	Specifies the markers to display for list items.	Unordered Lists: `circle` (Hollow circle) `disc` (Filled circle) `square` (Filled square) Ordered Lists: `decimal` (Number, such as 1) `decimal-leading-zero` (Number with an initial zero, such as 01) `lower-roman` (Lowercase Roman numeral, such as 'i') `upper-roman` (Uppercase Roman numeral, such as 'I') `lower-alpha` (Lowercase letter, such as 'a') `upper-alpha` (Uppercase letter, such as 'A') `lower-greek` (Lowercase Greek sequencing, such as 'alpha') `upper-greek` (Uppercase Greek sequencing, such as 'Alpha') `lower-latin` (Lowercase Latin letter, such as 'a') `upper-latin` (Uppercase Latin letter, such as 'A') `hebrew` (Hebrew numbering) `armenian` (Armenian numbering) `georgian` (Georgian numbering) `cjk-ideographic` (Ideographic numbering) `hiragana` `katakana` `hiragana-iroha` `katakana-iroha` Either: `none` (No list marker is shown)	While it is possible to style list items for an ordered list using non-numerical markers (and vice versa), keeping the semantics of the markup and its visual presentation aligned is best. Using the `list-style` shorthand is sufficient for setting this property, so `list-style-type` is not necessary.

See the Pen List Styling by Jason Withrow (@jwithrow) on CodePen.

Property	Usage and Effect	Values	Recommendations
list-style-position	Determines text position relative to the list item marker.	`outside` (the default) `inside`	Not used very frequently.

See the Pen List Style Position by Jason Withrow (@jwithrow) on CodePen.

Property	Usage and Effect	Values	Recommendations
list-style-image	Used to insert a graphical image as the list item marker.	File name (and directory path or URL) Absolute and relative paths are accepted	Browsers differ in how they place the image relative to the list item text, so it is recommended that testing occur cross-browser and cross-platform. Empty space may need to be added to the image to improve rendering across browsers. Also be careful with the application of line-height to the list items that have the graphical marker. In some browsers this can cause rendering complications.

See the Pen List Style Image by Jason Withrow (@jwithrow) on CodePen.

Property	Usage and Effect	Values	Recommendations
list-style	Combines the other list-related properties into a sequence.	list-style-type list-style-position list-style-image	Usually just the value for `list-style-type` is specified, so this offers a slightly more streamlined way of providing that information. Using the shorthand also means that the values not specified are assigned to defaults (overriding user and browser settings). If a `list-style-image` value is specified as well as a `list-style-type` value, the image is used. However, in situations where `list-style-image` is unsupported or the image cannot be found, the `list-style-type` would be used (so it is a fallback).

See the Pen List Style by Jason Withrow (@jwithrow) on CodePen.

There is currently no simple, cross-browser way to set the starting value for a list via CSS, or the value of a specific list item via CSS.
As a result, the deprecated start and value HTML attributes are still used.
The CSS approach that we do have is counters, and it allows any markup (not just list items) to be numbered.
It relies on CSS generating the content, and counters are just one possibility when it comes to generating content.

As CSS matured, and its second major version was released (CSS2), the capabilities of the styling language evolved from just styling what was there to being able to add content to the page.
This addition was not entirely welcomed at the time, as it allowed CSS to intrude into the territory handled by HTML (the structural layer of markup and content) and also JavaScript (the behavior layer that changes the HTML dynamically), but in the years since then it has become widely adopted. You will see it used for a variety of effects, like adding a chevron (<) to the edge of an element's border.
The content property determines what content gets added as the page is rendered, and the ::before and ::after pseudo-elements determine where the content appears.
As an example, let's assume you are styling a paragraph:
- Adding content using ::before, the browser is inserting a pseudo-element (which you can style as desired) and the indicated content immediately in front of the existing paragraph text that is in the HTML.
- Adding content using ::after adds a pseudo-element (which you can style as desired) and the indicated content immediately after the existing paragraph text that is in the HTML.
The earliest versions of these pseudo-elements used a single colon rather than a double colon. As the specification evolved, :before changed to ::before and :after to changed ::after, although browsers should accept either version.

Pseudo-Element or Property	Usage and Effect	Properties / Values
:after or ::after	Inserts the indicated content after the selector's HTML content.	A wide variety of CSS properties, most importantly the `content` property.
:before or ::before	Inserts the indicated content before the selector's HTML content.	A wide variety of CSS properties, most importantly the `content` property.
content	Specifies content to insert either `::before` or `::after`	Text string surrounded by quotes Image brought in via `url()` Attribute values via `attr()` `counter()` with the name of the counter inside the parentheses The `quotes` property also pairs with these `content` values: `open-quote` `close-quote` `no-open-quote` `no-close-quote`