Евгений Резниченко - Спецификация CSS2

Маркёры создаются путём установки свойства 'display' в 'marker' внутри псевдоэлементов :before или :after . Поскольку содержимое 'block' и 'inline' в :before и :after является частью основного бокса, генерируемого элементом, содержимое 'marker' форматируется в независимом боксе маркёра вне основного бокса. Боксы маркёра форматируются как единая строка (т.е. один бокс строки (строчный бокс)), поэтому они не обладают такой гибкостью, как поплавки. Боксы маркёра создаются только тогда, когда свойство 'content' псевдоэлементов действительно генерирует содержимое.

Боксы маркёра имеют заполнение и рамку, но не имеют полей.

Для псевдоэлемента :before базовая линия текста в боксе маркёра будет выровнена вертикально относительно базовой линии текста первой строки содержимого основного бокса. Если основной бокс не содержит текста, верхний внешний край бокса маркёра будет выровнен с верхним внешним краем основного бокса. Для псевдоэлемента :after базовая линия текста в боксе маркёра будет выровнена вертикально относительно базовой линии текста последней строки содержимого основного бокса. Если основной бокс не содержит текста, нижний внешний край бокса маркёра будет выровнен с нижним внешним краем основного бокса.

Высота бокса маркёра задаётся в свойстве 'line-height'. Бокс маркёра :before ( :after ) участвует в подсчёте высоты первого (последнего) строчного бокса основного бокса. Таким образом, маркёры выравниваются по первой и последней строке содержимого элемента, даже если боксы маркёра находятся в разных строчных боксах. Если в основном боксе отсутствует первый или последний строчный бокс, то бокс маркёра сам устанавливает свой первый строчный бокс.

Вертикальное выравнивание бокса маркёра внутри его строчного бокса специфицируется свойством 'vertical-align'.

Если значение свойства 'width' - 'auto', то ширина содержимого бокса маркёра является шириной содержимого, иначе - это значение 'width'. Для значений 'width' меньших, чем ширина содержимого, свойство 'overflow' специфицирует поведение при переполнении. Боксы маркёра могут перекрывать основные боксы. Для значений 'width' больших, чем ширина содержимого, свойство 'text-align' определяет горизонтальное выравнивание содержимого в боксе маркёра.

Свойство 'marker-offset'специфицирует смещение по горизонтали между боксом маркёра и ассоциированным основным боксом. Расстояние измеряется между их ближайшими краями рамок.

Примечание. Если маркёр всплывает вправо от поплавка в содержимом, отформатированном слева направо, то основной бокс будет всплывать вниз от правой стороны поплавка, но боксы маркёра будут появляться слева от поплавка. Поскольку левый край рамки основного бокса расположен слева от поплавка (см. описание поплавков), а бокс маркёра расположен вне края рамки основного бокса, маркёр расположится также слева от поплавка. Аналогичным будет и поведение при форматировании справа налево, когда маркёр всплывёт слева от поплавка.

Если свойство 'display' имеет значение 'marker' для содержимого, генерируемого элементом с 'display: list-item', то бокс маркёра, генерируемый для ' :before ', замещает нормальный маркёр элемента списка.

В следующем примере содержимое центрируется в боксе маркёра фиксированной ширины. Этот документ:

Выравнивание содержимого в боксе маркёра LI:before { display: marker; content: "(" counter(counter) ")"; counter-increment: counter; width: 6em; text-align: center; }

1. Это первый элемент списка.
2. Это второй элемент списка.
3. Это третий элемент списка.

должен дать примерно такой вывод:

(1) Это первый элемент списка. (2) Это второй элемент списка. (3) Это третий элемент списка.

В следующем примере создаются маркёры до и после элементов списка.

Этот документ:

Маркёры до и после элементов списка @media screen, print { LI:before { display: marker; content: url("smiley.gif"); LI:after { display: marker; content: url("sad.gif"); } }

• первый элемент списка появляется первым
• второй элемент списка появляется вторым

должен дать примерно такой вывод (здесь используется рисунок ascii вместо изображения gif улыбки):

:-) первый элемент списка появляется первым :-( :-) второй элемент списка появляется вторым :-(

В следующем примере маркёры используются для нумерации примечаний (параграфов).

Данный документ:

Маркёры для создания нумерованных примечаний 4 P { margin-left: 12 em; } @media screen, print { P.Note:before { display: marker; content: url("note.gif") "Примечание " counter(note-counter) ":"; counter-increment: note-counter; text-align: left; width: 10em; } }

Это первый параграф данного документа.

Читать дальше