Lists, tables & content

list-style

Shorthand for list-style-type, list-style-position and list-style-image, in any order.

list-style: none sets both the type and the image to none, removing the markers. Safari with VoiceOver then stops announcing the element as a list; add role="list" to the <ul> or <ol> if that matters.

ul.plain { list-style: none; padding-inline-start: 0; }

list-style-type

The marker drawn for each list item. A <counter-style> is a built-in style name (disc, circle, square, decimal, lower-roman, upper-alpha …) or one defined with @counter-style; a <string> is used as the marker exactly as written.

ol { list-style-type: lower-roman; }
ul.steps { list-style-type: '→ '; }

list-style-position

Whether the marker sits outside the list item's box, in the margin, or inside it as the first inline content, so that wrapped lines run under the marker.

list-style-image

An image to use as the marker instead of the list-style-type marker. If the image cannot be loaded, the list-style-type marker is shown.

The image is drawn at its natural size. For control over size and alignment, style the ::marker pseudo-element or use a background image instead.

counter-reset

Creates one or more new counters on the element, each starting at the given integer (0 if omitted). Descendants and later siblings see the new counter, and the counter() and counters() functions print its value in content.

A <reversed-counter-name> is reversed(name): a counter that counts down, starting by default from the number of items. List items use a built-in counter called list-item, which these properties can also reset and change.

article { counter-reset: figure; }
figure { counter-increment: figure; }
figcaption::before { content: 'Figure ' counter(figure) ': '; }

counter-increment

Adds to one or more counters each time the element appears. The integer is the step (1 if omitted) and can be negative. If no counter of that name is in scope, a new one is created at 0 first.

counter-set

Sets one or more existing counters to a value (0 if omitted) without starting a new counter, so nested numbering is not affected.

On one element, counters are reset first, then set, then incremented.

content

The content generated for ::before, ::after and ::marker, or a replacement for an element's own content. A <content-list> is a run of strings, images, counter(), counters(), attr() and the quote keywords open-quote, close-quote, no-open-quote and no-close-quote.

a[target=_blank]::after { content: ' ↗' / ' (opens in a new tab)'; }

quotes

The quotation marks that open-quote and close-quote insert, for example around <q> elements. Each pair of strings is one nesting level: the first pair for outer quotes, the next for quotes inside them.

auto picks marks suited to the content language set by lang. none makes the quote keywords insert nothing.

q { quotes: '«' '»' '‹' '›'; }

border-collapse

Chooses between the separated borders model, where each cell has its own border with space between, and the collapsing model, where adjacent cells share a single border.

In the collapsing model, where two borders meet the wider one wins, and border-spacing and empty-cells have no effect.

table { border-collapse: collapse; }
td, th { border: 1px solid; }

border-spacing

The gap between the borders of adjacent cells in the separated borders model. One length sets both directions; two set the horizontal then the vertical gap.

Browsers' default style sheets give HTML tables border-spacing: 2px.

caption-side

Puts a table's caption above or below the table.

empty-cells

Whether borders and backgrounds are drawn around cells that have no visible content, in the separated borders model.

table-layout

Chooses how column widths are worked out. auto sizes columns to fit the content of every cell. fixed takes the widths from the table and its first row only, so the table lays out faster and long content cannot widen a column.

table { table-layout: fixed; width: 100%; }
col.name { width: 40%; }