Как изменить размер маркера списка css

От автора: теперь легко настроить цвет, размер или тип числа или маркера при использовании <ul> или <ol>. Благодаря Igalia, спонсируемой Bloomberg, мы наконец-то можем убрать хаки для стилей списков. Судите сами!

Благодаря CSS ::marker мы можем изменять содержимое и некоторые стили маркеров и чисел.

Совместимость с браузерами

Когда выйдет Chromium 86, ::marker будет поддерживаться в Firefox для настольных компьютеров и Android, Safari для настольных ПК и iOS Safari, а также в браузерах для настольных ПК и Android на базе Chromium. См. обновления в таблице совместимости браузеров MDN.

Псевдо-элементы

Рассмотрим следующий маркированный список HTML:

В результате получается следующий неожиданный рендеринг:

Точка в начале каждого элемента li является произвольной! Браузер рисует и создает за вас сгенерированную рамку маркера.

Сегодня мы рады поговорить о псевдо-элементе ::marker, который дает возможность стилизовать элемент маркера, который браузеры создают за вас.

Важно: псевдо-элемент представляет в документе элемент, отличный от тех, которые существуют в дереве документа. Например, вы можете выбрать первую строку абзаца с помощью псевдо-элемента p::first-line, даже если нет HTML-элемента, обертывающего эту строку текста.

Создание маркера

Блок псевдо-элемента маркера ::marker автоматически создается внутри каждого элемента списка перед фактическим содержимым и псевдо-элементом ::before.

Обычно элементы списка являются элементами HTML li, но другие элементы также могут стать элементами списка с помощью display: list-item.

Стилизация маркера

До ::marker списки не могли быть стилизованы с помощью list-style-type и list-style-image, чтобы изменить символ элемента списка с помощью 1 строки CSS:

Это удобно, но нам нужно больше. А как насчет изменения цвета, размера, интервала и т. д.!? Вот где на помощь приходит ::marker. Он позволяет индивидуально и глобально выбирать эти псевдо-элементы из CSS:

Внимание: Если в приведенном выше списке нет розовых маркеров, значит ::marker не поддерживается вашим браузером.
Свойство list-style-type дает очень ограниченные возможности для стилизации. Псевдо-элемент ::marker означает, что можно настроить таргетинг самого маркера и применить стили непосредственно к нему. Это дает гораздо больший контроль.

Тем не менее, вы не можете использовать все свойства CSS для ::marker. Список разрешенных и запрещенных свойств четко указан в спецификации. Если вы попробуете что-то интересное с этим псевдо-элементом, и это не сработает, приведенный ниже список является вашим руководством по тому, что можно и что нельзя сделать с помощью CSS.

Допустимые свойства CSS для ::marker

Изменение содержимого ::marker выполняется с помощью content вместо list-style-type. В следующем примере для первого элемента используется стиль list-style-type, а для второго — ::marker. Свойства в первом случае применяются ко всему элементу списка, а не только к маркеру, что означает, что текст анимируется так же, как и маркер. При использовании ::marker мы можем выбирать только блок маркера, а не текст.

Также обратите внимание на то, что отключенное свойство background не действует.

Стили списков

Стили маркеров

Проблемы!

В Chromium white-space работает только с внутренними маркерами. Для маркеров, расположенных снаружи регулятор стиля всегда задает white-space: pre, чтобы сохранить свободное пространство.

Изменение содержимого маркера

Вот несколько способов стилизации маркеров.

Изменение всех маркеров списка

Изменение только одного маркера списка

Замена маркера списка на SVG

Изменение нумерованных списков

А что насчет ol? Маркер в элементе нумерованного списка по умолчанию является числом, а не маркером. В CSS они называются счетчиками, и они довольно мощные. У них даже есть свойства для установки и сброса в начале и в конце числа или переключения их на римские цифры. Можем ли мы это стилизовать? Да, и мы даже можем использовать значение содержимого маркера для создания собственного представления нумерации.

Отладка

Chrome DevTools готов помочь вам проверить, отладить и изменить стили, применяемые к псевдо-элементам ::marker.

Автор: Adam Argyle, Oriol Brufau

Источник: //web.dev

Редакция: Команда webformyself.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:

   Она выглядит вот так:

2. Текстовая ссылка:

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   

1. Introduction

This specification defines the ::marker pseudo-element,
the list-item display type that generates markers,
and several properties controlling the placement and styling of markers.

It also defines counters,
which are special numerical objects
often used to generate the default contents of markers.

<style>
li::marker { content: "(" counter(list-item, lower-roman) ")"; }
li { display: list-item; }
</style>
<ol>
  <li>This is the first item.
  <li>This is the second item.
  <li>This is the third item.
</ol>

  (i) This is the first item.
 (ii) This is the second item.
(iii) This is the third item.

With descendant selectors and child selectors,
it’s possible to specify different marker types depending on the depth of embedded lists.

1.1. Value Definitions

This specification follows the CSS property definition conventions from [CSS2] using the value definition syntax from [CSS-VALUES-3].
Value types not defined in this specification are defined in CSS Values & Units [CSS-VALUES-3].
Combination with other CSS modules may expand the definitions of these value types.

In addition to the property-specific values listed in their definitions,
all properties defined in this specification
also accept the CSS-wide keywords as their property value.
For readability they have not been repeated explicitly.

2. Declaring a List Item

A list item is any element with its display property set to list-item. List items generate ::marker pseudo-elements;
no other elements do.
Additionally, list items automatically increment an implied list-item counter (see § 4.6 The Implicit list-item Counter).

3. Markers

The defining feature of the list item display type is its marker,
a symbol or ordinal that helps denote the beginning of each list item in a list.
In the CSS layout model, list item markers are represented by
a marker box associated with each list item.
The contents of this marker can be controlled with
the list-style-type and list-style-image properties on the list item and by assigning properties to its ::marker pseudo-element.

3.1. The ::marker Pseudo-Element

The marker box is generated by
the ::marker pseudo-element of a list item as the list item’s first child,
before the ::before pseudo-element
(if it exists on the element).
It is filled with content
as defined in § 3.2 Generating Marker Contents.

<style>
p { margin-left: 12 em; }
p.note {
  display: list-item;
  counter-increment: note-counter;
}
p.note::marker {
  content: "Note " counter(note-counter) ":";
}
</style>
<p>This is the first paragraph in this document.
<p class="note">This is a very short document.
<p>This is the end.

        This is the first paragraph
        in this document.

Note 1: This is a very short
        document.

        This is the end.

<style>
p { margin-left: 8em } /* Make space for counters */
li { list-style-type: lower-roman; }
li::marker { color: blue; font-weight:bold; }
</style>
<p>This is a long preceding paragraph ...
<ol>
  <li>This is the first item.
  <li>This is the second item.
  <li>This is the third item.
</ol>
<p>This is a long following paragraph ...

       This is a long preceding
       paragraph ...

  i.   This is the first item.
 ii.   This is the second item.
iii.   This is the third item.

       This is a long following
       paragraph ...

Marker boxes only exist for list items:
on any other element,
the ::marker pseudo-element’s content property must compute to none,
which suppresses its creation.

3.1.1. Properties Applying to ::marker

All properties can be set on a ::marker pseudo-element
and will have a computed value;
however,
only the following CSS properties
actually apply to a marker box:

• the text-combine-upright, unicode-bidi, and direction properties (see [CSS-WRITING-MODES-3])
• the content property (see § 3.2 Generating Marker Contents, below)
• all animation and transition properties (see [CSS-ANIMATIONS-1] and [CSS-TRANSITIONS-1])

It is expected that future specifications will extend this list of properties;
however at the moment outside marker box layout is not fully defined,
so only these properties are allowed.

Other properties must not have an effect on the marker box when set in the author origin of the cascade.
UAs may either treat such properties as not applying,
or enforce their value by setting a user-agent origin !important rule.
However, inheritable properties that apply to text
can be set on the ::marker pseudo-element:
these will inherit to and take effect on its text contents.

UAs must add the following rule to their default style sheet:

::marker, ::before::marker, ::after::marker {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  white-space: pre;
  text-transform: none;
}

Note: Although the ::marker pseudo-element can represent
the marker box of a ::before or ::after pseudo-element,
the compound selector ::marker,
which expands to *::marker [SELECTORS-4],
will not select these markers—an originating element that is a pseudo-element needs to be explicitly specified in the selector,
e.g. ::before::marker.

white-space: pre doesn’t have quite the right behavior; text-space-collapse: preserve-spaces + text-space-trim: discard-after might be closer to what’s needed here.
See discussion in Issue 4448 and Issue 4891.

3.2. Generating Marker Contents

The contents of a marker box are determined by the first of these conditions that is true:

content on the ::marker itself is not normal

The contents of the marker box are determined as defined by the content property,
exactly as for ::before.

list-style-image on the originating element defines a marker image

The ‘marker box contains
an anonymous inline replaced element representing the specified marker image,
followed by a text run consisting of a single space (U+0020 SPACE).

list-style-type on the originating element defines a marker string

The marker box contains
a text run consisting of the specified marker string.

otherwise

The marker box has no contents
and ::marker does not generate a box.

Additionally, the UA may transform into spaces or discard
any preserved forced line breaks.

3.3. Image Markers: the list-style-image property

Specifies the marker image,
which is used to fill the list item’s marker when its content is normal.
The values are as follows:

<image>

If the <image> represents a valid image,
specifies the element’s marker image as the <image>.
Otherwise,
the element has no marker image.

none

The element has no marker image.

li { list-style-image: url("http://www.example.com/ellipse.png") }

3.4. Text-based Markers: the list-style-type property

Specifies the marker string,
which is used to fill the list item’s marker when its content value is normal and there is no marker image.
The values are as follows:

<counter-style>

Specifies the element’s marker string as
the value of the list-item counter
represented using the specified <counter-style>.

Specifically,
the marker string is
the result of generating a counter representation of the list-item counter value
using the specified <counter-style>,
prefixed by the prefix of the <counter-style>,
and followed by the suffix of the <counter-style>.
If the specified <counter-style> does not exist, decimal is assumed.

<string>

The element’s marker string is the specified <string>.

none

The element has no marker string.

ul { list-style-type: "★"; }
/* Sets the marker to a "star" character */

p.note {
  display: list-item;
  list-style-type: "Note: ";
  list-style-position: inside;
}
/* Gives note paragraphs a marker consisting of the string "Note: " */

ol { list-style-type: upper-roman; }
/* Sets all ordered lists to use the upper-roman counter-style
   (defined in the Counter Styles specification [[CSS-COUNTER-STYLES]]) */

ul { list-style-type: symbols(cyclic '○' '●'); }
/* Sets all unordered list items to alternate between empty and
   filled circles for their markers. */

ul { list-style-type: none; }
/* Suppresses the marker entirely, unless list-style-image is specified
   with a valid image. */

3.5. Positioning Markers: The list-style-position property

This property dictates whether the ::marker is rendered inline,
or positioned just outside of the list item.
The values are as follows:

inside

No special effect.
(The ::marker is an inline element at the start of the list item’s contents.)

outside

If the list item is a block container:
the marker box is a block container and is placed outside the principal block box;
however, the position of the list-item marker adjacent to floats is undefined.
CSS does not specify the precise location of the marker box
or its position in the painting order,
but does require that it be placed on the inline-start side of the box,
using the writing mode of the box indicated by marker-side.
The marker box is fixed with respect to the principal block box’s border
and does not scroll with the principal box’s content.
A UA may hide the marker if the element’s overflow is other than visible.
(This allowance may change in the future.)
The size or contents of the marker box may affect
the height of the principal block box
and/or the height of its first line box,
and in some cases may cause the creation of a new line box;
this interaction is also not defined.

This is handwavey nonsense from CSS2, and needs a real definition.

If the list item is an inline box:
this value is equivalent to inside.

Alternatively, outside could lay out the marker as a previous sibling of the principal inline box.

<style>
  ul.compact { list-style: inside; }
  ul         { list-style: outside; }
</style>
<ul class=compact>
  <li>first "inside" list item comes first</li>
  <li>second "inside" list item comes first</li>
</ul>
<hr>
<ul>
  <li>first "outside" list item comes first</li>
  <li>second "outside" list item comes first</li>
</ul>

  * first "inside" list
  item comes first
  * second "inside" list
  item comes second

========================

* first "outside" list
  item comes first
* second "outside" list
  item comes second

3.6. Styling Markers: the list-style shorthand property

The list-style property is a shorthand notation
for setting the three properties list-style-type, list-style-image, and list-style-position at the same place in the style sheet.

ul { list-style: upper-roman inside }  /* Any UL */
ul ul { list-style: circle outside } /* Any UL child of a UL */

Using a value of none in the shorthand is potentially ambiguous,
as none is a valid value for both list-style-image and list-style-type.
To resolve this ambiguity,
a value of none in the shorthand must be applied to whichever of the two properties aren’t otherwise set by the shorthand.

list-style: none disc;
/* Sets the image to "none" and the type to "disc". */

list-style: none url(bullet.png);
/* Sets the image to "url(bullet.png)" and the type to "none". */

list-style: none;
/* Sets both image and type to "none". */

list-style: none disc url(bullet.png);
/* Syntax error */

Note: The <counter-style> values of list-style-type can also create grammatical ambiguities.
As such values are ultimately <custom-ident> values,
the parsing rules in [CSS-VALUES-3] apply.

ol.alpha li { list-style: lower-alpha; }
ul li       { list-style: disc; }

ol.alpha > li { list-style: lower-alpha; }
ul > li       { list-style: disc; }

ol.alpha { list-style: lower-alpha; }
ul       { list-style: disc; }

3.7. The marker-side property

The marker-side property specifies
whether an outside marker box is positioned
based on the directionality of the list item itself (i.e. its originating element)
or the directionality of the list container (i.e. the originating element’s parent).
In the first case, the position of the marker can vary across items in the same list,
based on the directionality assigned to each list item individually;
in the second case they will all align on the same side,
as determined by the directionality assigned to the list as a whole.

match-self

The marker box is positioned
using the directionality of the ::marker’s originating element.

match-parent

The marker box is positioned
using the directionality of the ::marker’s originating element’s parent element.

<ul>
  <li>english one
  <li dir=rtl>OWT WERBEH
  <li>english three
  <li dir=rtl>RUOF WERBEH
</ul>

* english one
     OWT WERBEH *
* english three
    RUOF WERBEH *

* english one
*    OWT WERBEH
* english three
*   RUOF WERBEH

For this order punctuation inside the marker correctly,
it would also need to take the direction value of the parent. <https://github.com/w3c/csswg-drafts/issues/4202>

There are issues open on renaming the keywords and on merging with list-style-position.

4. Automatic Numbering With Counters

A counter is a special numeric tracker
used, among other things, to automatically number list items in CSS.
Every element has a collection of zero or more counters,
which are inherited through the document tree in a way similar to inherited property values. Counters have a name and creator,
which identify the counter,
and an integer value.
They are created and manipulated with
the counter properties counter-increment, counter-set and counter-reset,
and used with the counter() and counters() functional notations.

Counters are referred to in CSS syntax
using the <counter-name> type,
which represents their name as a <custom-ident>.
A <counter-name> name cannot match the keyword none;
such an identifier is invalid as a <counter-name>.

Resolving counter values on a given element is a multi-step process:

1. Existing counters are inherited from previous elements.

2. New counters are instantiated (counter-reset).

3. Counter values are incremented (counter-increment).

4. Counter values are explicitly set (counter-set).

5. Counter values are used (counter()/counters()).

UAs may have implementation-specific limits
on the maximum or minimum value of a counter.
If a counter reset, set, or increment
would push the value outside of that range,
the value must be clamped to that range.

4.1. Creating Counters: the counter-reset property

User Agents are expected to support this property on all media, including non-visual ones.

The counter-reset property instantiates new counters on an element
and sets them to the specified integer values.
Its values are defined as follows:

none

This element does not create any new counters.

<counter-name> <integer>?

Instantiates a counter of the given <counter-name> with a starting value of the given <integer>,
defaulting to 0.

h1 { counter-reset: section -1 }
h1 { counter-reset: imagenum 99 }

H1 { counter-reset: section -1 imagenum 99 }

If multiple instances of the same <counter-name> occur in the property value,
only the last one is honored.

4.2. Manipulating Counter Values: the counter-increment and counter-set properties

User Agents are expected to support this property on all media, including non-visual ones.

User Agents are expected to support this property on all media, including non-visual ones.

The counter-increment and counter-set properties
manipulate the value of existing counters.
They only instantiate new counters
if there is no counter of the given name on the element yet.
Their values are defined as follows:

none

This element does not alter the value of any counters.

<counter-name> <integer>?

Sets (for counter-set) or increments (for counter-increment)
the value of the named counter on the element
to/by the specified <integer>.
If the <integer> is omitted,
it defaults to 1 (for counter-increment)
or 0 (for counter-set).

If there is not currently a counter of the given name on the element,
the element instantiates a new counter of the given name
with a starting value of 0 before setting or incrementing its value.

h1::before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
    counter-reset: section;      /* Set section to 0 */
}
h2::before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

If multiple instances of the same <counter-name> occur in the property value,
they are all processed, in order.
Thus increments will compound,
but only the last set value will take effect.

4.3. Nested Counters and Scope

Counters are “self-nesting”; instantiating a new counter on an element
which inherited an identically-named counter from its parent
creates a new counter of the same name,
nested inside the existing counter.
This is important for situations like lists in HTML,
where lists can be nested inside lists to arbitrary depth:
it would be impossible to define uniquely named counters for each level.
The counter() function only retrieves the innermost counter of a given name on the element,
whereas the counters() function uses all counters of a given name that contain the element.

The scope of a counter therefore
starts at the first element in the document that instantiates that counter
and includes the element’s descendants and its following siblings with their descendants.
However, it does not include any elements in the scope of a counter with the same name
created by a counter-reset on a later sibling of the element,
allowing such explicit counter instantiations
to obscure those earlier siblings.

See § 4.4 Creating and Inheriting Counters for the exact rules governing the scope of counters and their values.

ol { counter-reset: item }
li { display: block }
li::before { content: counter(item) ". "; counter-increment: item }

4.4. Creating and Inheriting Counters

Each element or pseudo-element in a document has
a (possibly empty) set of counters in the scope of that element,
either through inheritance from another element
or through instantiation on the element directly.
These counters are represented as a CSS counters set,
which is a set whose values are each a tuple of:
a string (representing a counter’s name),
an element (representing the counter’s creator),
and an integer (representing the counter’s value).
The latest counter of a given name in that set
represents the innermost counter of that name.

4.4.1. Inheriting Counters

<ul style='counter-reset: example 0;'>
  <li id='foo' style='counter-increment: example;'>
    foo
    <div id='bar' style='counter-increment: example;'>bar</div>
  </li>
  <li id='baz'>
    baz
  </li>
</ul>

Note: Counter inheritance, like regular CSS inheritance,
operates on the “flattened element tree”
in the context of the [DOM].

4.4.2. Instantiating Counters

4.5. Counters in elements that do not generate boxes

An element that does not generate a box
(for example, an element with display set to none, or a pseudo-element with content set to none)
cannot set, reset, or increment a counter.
The counter properties are still valid on such an element,
but they must have no effect.

h2 { counter-increment: count2; }
h2.secret { display: none; }

Note: Other methods of “hiding” elements,
such as setting visibility to hidden,
still cause the element to generate a box,
and so are not excepted here.

Whether a replaced element’s descendants
(such as HTML option,
or SVG rect)
can set, reset, or increment a counter
is undefined.

Note: The behavior on replaced element descendants is currently undefined
due to a lack of interoperability across implementations.

4.6. The Implicit list-item Counter

In addition to any explicitly defined counters that authors write in their styles, list items automatically increment
a special list-item counter,
which is used when generating the default marker string on list items (see list-style-type).

Specifically,
unless the counter-increment property explicitly specifies
a different increment for the list-item counter,
it must be incremented by 1 on every list item,
at the same time that counters are normally incremented
(exactly as if the list item had list-item 1 appended to their counter-increment value,
including side-effects such as possibly instantiating a new counter, etc).
This does not affect the specified or computed values of counter-increment.

In all other respects, the list-item counter behaves like any other counter and can be used and manipulated by authors
to adjust list item styling
or for other purposes.

ol.evens > li { counter-increment: list-item 2; }

2. First Item
4. Second Item
6. Third Item

UAs and host languages should ensure
that the list-item counter values
by default
reflect the underlying numeric value dictated by host language semantics
when setting up list item styling
in their UA style sheet and presentational hint style mappings.
See, e.g. Appendix A: Sample Style Sheet For HTML.

ol > li::marker { content: counters(list-item,'.') '.'; }

1. First top-level item
5. Second top-level item, value=5
   5.3. First second-level item, list start=3
   5.4. Second second-level item, list start=3
        5.4.4. First third-level item in reversed list
        5.4.3. Second third-level item in reversed list
        5.4.2. Third third-level item in reversed list
        5.4.1. Fourth third-level item in reversed list
   5.5. Third second-level item, list start=3
6. Third top-level item

<ol>
  <li>First top-level item
  <li value=5>Second top-level item, value=5
    <ol start=3>
      <li>First second-level item, list start=3
      <li>Second second-level item, list start=3
        <ol reversed>
          <li>First third-level item in reversed list
          <li>Second third-level item in reversed list
          <li>Third third-level item in reversed list
          <li>Fourth third-level item in reversed list
        </ol>
    </ol>
  <li>Third second-level item, list start=3
  <li>Third top-level item
</ol>

4.7. Outputting Counters: the counter() and counters() functions

Counters have no visible effect by themselves,
but their values can be used
with the counter() and counters() functions,
whose used values represent counter values as strings or images.
They are defined as follows:

<counter> = <counter()> | <counters()>
counter()  =  counter( <counter-name>, <counter-style>? )
counters() = counters( <counter-name>, <string>, <counter-style>? )

where <counter-style> specifies the counter style for generating a representation of the named counter(s)
as defined in [css-counter-styles-3] and

counter()

Represents the value of the innermost counter in the element’s CSS counters set named <counter-name> using the counter style named <counter-style>.

counters()

Represents the values of all the counters in the element’s CSS counters set named <counter-name> using the counter style named <counter-style>,
sorted in outermost-first to innermost-last order
and joined by the specified <string>.

In both cases,
if the <counter-style> argument is omitted it defaults to decimal.

If no counter named <counter-name> exists
on an element where counter() or counters() is used,
one is first instantiated with a starting value of 0.

H1::before        { content: counter(chno, upper-latin) ". " }
/* Generates headings like "A. A History of Discontent" */

H2::before        { content: counter(section, upper-roman) " - " }
/* Generates headings like "II - The Discontent Part" */

BLOCKQUOTE::after { content: " [" counter(bq, decimal) "]" }
/* Generates blockquotes that end like "... [3]" */

DIV.note::before  { content: counter(notecntr, disc) " " }
/* Simply generates a bullet before every div.note */

P::before         { content: counter(p, none) }
/* inserts nothing */

<ul>
  <li>one</li>
  <li>two
    <ul>
      <li>nested one</li>
      <li>nested two</li>
    </ul>
  </li>
  <li>three</li>
</ul>
<style>
li::marker { content: '(' counters(list-item,'.') ') '; }
</style>

(1) one
(2) two
   (2.1) nested one
   (2.2) nested two
(3) three

<h1>First H1</h1>
...
<h2>First H2 in H1</h2>
...
<h2>Second H2 in H1</h2>
...
<h3>First H3 in H2</h3>
...
<h1>Second H1</h1>
...
<h2>First H2 in H1</h2>
...
<style>
body { counter-reset: h1 h2 h3; }
h1   { counter-increment: h1; counter-reset: h2 h3;}
h2   { counter-increment: h2; counter-reset:    h3; }
h3   { counter-increment: h3; }
h1::before { content: counter(h1,upper-alpha) ' '; }
h2::before { content: counter(h1,upper-alpha) '.'
                      counter(h2,decimal) ' '; }
h3::before { content: counter(h1,upper-alpha) '.'
                      counter(h2,decimal) '.'
                      counter(h3,lower-roman) ' '; }
</style>

A First H1
...
A.1 First H2 in H1
...
A.2 Second H2 in H1
...
A.2.i First H3 in H2
...
B Second H1
...
B.1 First H2 in H1
...

Appendix A: Sample Style Sheet For HTML

This section is informative, not normative.
The [HTML] Rendering chapter
defines the normative default properties that apply to HTML lists;
this sample style sheet is provided to illustrate the CSS features
using familiar markup conventions.

Discussion of how to support ol[reversed] list numbering in CSS is ongoing.
See, e.g. Issue 4181.

/* Set up list items */
li {
  display: list-item; /* implies 'counter-increment: list-item' */
}

/* Set up ol and ul so that they scope the list-item counter */
ol, ul {
  counter-reset: list-item;
}

/* Default list style types for lists */
ol { list-style-type: decimal; }
ul { list-style-type: toggle(disc, circle, square); }

/* The type attribute on ol and ul elements */
ul[type="disc"]   { list-style-type: disc;   }
ul[type="circle"] { list-style-type: circle; }
ul[type="square"] { list-style-type: square; }
ol[type="1"] { list-style-type: decimal;     }
ol[type="a"] { list-style-type: lower-alpha; }
ol[type="A"] { list-style-type: upper-alpha; }
ol[type="i"] { list-style-type: lower-roman; }
ol[type="I"] { list-style-type: upper-roman; }

/* The start attribute on ol elements */
ol[start] {
  counter-reset: list-item calc(attr(start integer, 1) - 1);
}

/* The value attribute on li elements */
li[value] {
  counter-set: list-item attr(value integer, 1);
}


/* Box Model Rules */
ol, ul {
  display: block;
  margin-block: 1em;
  marker-side: match-parent;
  padding-inline-start: 40px;
}
ol ol, ol ul, ul ul, ul ol {
  margin-block: 0;
}

li {
  text-align: match-parent;
}

Acknowledgments

This specification is made possible by input from
Aharon Lanin,
Arron Eicholz,
Brad Kemper,
David Baron,
Emilio Cobos Álvarez,
Mats Palmgren,
Oriol Brufau,
Simon Sapin,
Xidorn Quan

Changes

This section documents the changes since previous publications.

Changes since the 9 July 2020 WD

• Clarified properties that apply to ::marker boxes
  vs. to the contents of ::marker boxes.
  (Issue 4568)
• Added text-transform: none to the UA default style sheet for ::marker.
  (Issue 4206)
• Changed counter inheritance to take from the parent first,
  and only take from the sibling if it’s a new counter.
  (Issue 5477)

Changes since the 17 August 2019 WD

• Specified that outside list markers block containers.
  (Their outer display type remains undefined.)
• Stole list of properties applying to ::marker from [CSS-PSEUDO-4] and added animations, transitions, and white-space.
• Added white-space: pre to UA default style sheet for ::marker.
  (Issue 4448)
  Note, however, that the exact white space processing behavior of marker boxes
  is still being worked out.

Changes since the 25 April 2019 WD

• Rewrote the § 4 Automatic Numbering With Counters section for better precision, editorial clarity, and synchronization with CSS2.

Changes since the 20 March 2014 WD

• Use <custom-ident> consistently for counter names.
• Dropped position: marker (marker positioning is now mostly undefined, as in CSS2).
• Completely rewrote chapter on markers to tighten it up,
  align with current expectations, and make editorial improvements.
• Pulled the list-item counter definition
  into its own section, added examples, and made some clarifications.
• Renamed values of marker-side to match conventions from box/text alignment.
• Defined that counter-set is applied after counter-increment rather than before.
  (Issue 3810)
• Established the canonical order of list-style serialization
  to put <‘list-style-type’> last.
  (Issue 2624)

Changes From CSS Level 2

As described in the introduction section,
there are significant changes in this module when compared to CSS2.1.

1. The ::marker pseudo-element has been introduced to allow styling of the list marker directly.
2. list-style-type now accepts a <string> as well as the extended <counter-style> values from [css-counter-styles-3]..
3. The list-item predefined counter identifier has been introduced.
4. The counter-set property has been added.
5. Allowed for inline-level list items, as introduced in [CSS-DISPLAY-3].

• Изменение и удаление маркеров
• Замена маркеров картинками
• Отступ списка

С помощью HTML-тегов можно создать два типа списков, имеющих маркеры: нумерованные и маркированные. По умолчанию большинство браузеров отображает маркеры маркированных списков в виде окружности, а маркеры нумерованных в виде чисел, идущих по порядку. CSS предоставляет возможность изменения внешнего вида стандартных маркеров. Далее будут продемонстрированы примеры с различными видами маркеров, с помощью которых, вы сможете изменить внешний вид своих списков.

Изменение и удаление маркеров

Для изменения стандартного внешнего вида маркера в CSS используется свойство list-style-type, в качестве значения задается тот вид маркера, на который вы хотите заменить стандартный.

Пример, демонстрирующий некоторые виды маркеров для нумерованных списков:

Для маркированных списков существует всего три вида маркеров, которые можно задать с помощью значений circle, disk и squred:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      .class1 { list-style-type: circle; }
      .class2 { list-style-type: disc; }
      .class3 { list-style-type: square; }
    </style>
  </head>

  <body>
    <ul class="class1">
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ul class="class2">
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ul class="class3">
      <li>Кофе</li><li>Чай</li>
    </ul>
  </body>
</html>

Попробовать »

С помощью значения none можно удалить маркеры у пунктов в списке, но отступ слева при этом все равно останется:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      ul { list-style-type: none; }
	  ol { list-style-type: none; }
    </style>
  </head>

  <body>
    <ul>
      <li>Кофе</li><li>Чай</li>
    </ul>
	<ol>
      <li>Кофе</li><li>Чай</li>
    </ol>
  </body>
</html>

Попробовать »

Замена маркеров картинками

Если вам не подходит ни один из предлагаемых по умолчанию маркеров, то CSS предоставляет возможность заменить их любой картинкой, в этом вам поможет свойство list-style-image, в значении которого нужно прописать путь к выбранному изображению.

Примите во внимание тот факт, что изображение не будет автоматически масштабироваться под список и будет отображено собственным размером, поэтому придется подбирать изображение подходящее по размеру или редактировать существующее, уменьшив или увеличив его до нужного:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      ul { list-style-image: url('sqpurple.gif'); }
      ol { list-style-image: url('donald.gif'); }
    </style>
  </head>

  <body>
    <ul>
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ol>
      <li>Кофе</li><li>Чай</li>
    </ol>
  </body>
</html>

Попробовать »

Отступ списка

При удалении маркеров у пунктов списка можно также удалить или уменьшить размер левого отступа, устанавливаемый браузером по умолчанию. Для полного удаления отступа нужно будет воспользоваться свойством padding-left, которое позволяет регулировать внутренний отступ:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      ul { 
	    list-style-type: none;
        padding-left: 0;		
	  }
	  ol { padding-left: 0;	}
    </style>
  </head>

  <body>
    <ul>
      <li>Кофе</li><li>Чай</li>
    </ul>
	<ol>
      <li>Кофе</li><li>Чай</li>
    </ol>
  </body>
</html>

Попробовать »

В примере мы полностью убрали отступ с левой стороны, поэтому пункты списка теперь вплотную прилегают к краю окна браузера. И как видно из примера маркированный список отображается именно так, как и было задумано, но в нумерованном списке пропали маркеры. Причина кроется в самих маркерах — по умолчанию маркеры не являются частью содержимого пунктов списка, поэтому если убрать левый отступ они не сдвигаются вместе с содержимым элементов <li>, а просто скрываются за краем окна браузера.

Свойство list-style-position указывает, должен ли маркер располагаться внутри или снаружи пунктов списка. Данное свойство может принимать два значения:

• outside — маркер располагается слева от содержимого (является значением по умолчанию)
• inside — маркер располагается внутри пункта списка вместе с содержимым

Теперь можно переписать предыдущий пример так, чтоб отступ с левой стороны был убран, но маркеры при этом не уезжали за край браузера:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
	  li { border: 1px solid red; }
      .class1 { list-style-position: outside; }
      .class2 { list-style-position: inside; }
      .class3 { 
	    list-style-position: inside;
		padding-left: 0;
	  }
    </style>
  </head>

  <body>
    <ul class="class1">
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ul class="class2">
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ul class="class3">
      <li>Кофе</li><li>Чай</li>
    </ul>
  </body>
</html>

Попробовать »

В примере к каждому пункту списка была добавлена рамка, чтобы визуально показать границы пунктов списка.