Да, второй аргумент counter()
определяет тип используемого счетчика, как для list-style-type
из обычного ul
или ol
; Например:
content: counter(chapter, lower-alpha);
ul {
counter-reset: listStyle;
}
ul li {
margin-left: 1em;
counter-increment: listStyle;
}
ul li::before {
margin-right: 1em;
content: counter(listStyle, lower-alpha);
}
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
демонстрация JS Fiddle.
Другие включают: decimal
, decimal-leading-zero
, lower-roman
, upper-roman
, lower-greek
, lower-latin
, upper-latin
, armenian
, georgian
, lower-alpha
, upper-alpha
.
Поскольку в приведенный выше список стилей, похоже, было внесено некоторое обновление, я решил добавить фрагмент кода, который позволяет пользователю выбирать из (в настоящее время) доступных параметров вместе с областью «вывода», чтобы показать, как чтобы использовать этот стиль с содержимым, сгенерированным CSS:
let select = document.querySelector('select'),
output = document.querySelector('#currentCounter'),
changeEvent = new Event('change');
select.addEventListener('change', function() {
document.body.style.setProperty('--listStyleType', this.value);
output.textContent = this.value;
});
select.dispatchEvent(changeEvent);
body {
--listStyleType: decimal;
}
ul {
counter-reset: listStyle;
columns: 2;
margin-top: 0.5em;
list-style-type: none;
}
ul li {
counter-increment: listStyle;
}
ul li::before {
content: counter(listStyle, var(--listStyleType));
display: inline-block;
margin-right: 0.5em;
width: 1.5em;
height: 1.5em;
line-height: 2em;
text-align: center;
}
code {
display: block;
white-space: pre-wrap;
width: 80%;
box-sizing: border-box;
margin: 1em auto;
padding: 0.5em;
box-shadow: 0 0 0 3px limegreen;
}
code::after {
content: '\A';
}
#currentCounter {
color: #f90;
}
<label for="counterChoice">Please select a CSS counter:</label>
<select id="counterChoice">
<option value="arabic-indic">arabic-indic</option>
<option value="armenian">armenian</option>
<option value="bengali">bengali</option>
<option value="cambodian">cambodian</option>
<option value="circle">circle</option>
<option value="cjk-decimal">cjk-decimal</option>
<option value="cjk-earthly-branch">cjk-earthly-branch</option>
<option value="cjk-heavenly-stem">cjk-heavenly-stem</option>
<option value="decimal">decimal</option>
<option value="decimal-leading-zero">decimal-leading-zero</option>
<option value="devanagari">devanagari</option>
<option value="disc">disc</option>
<option value="disclosure-closed">disclosure-closed</option>
<option value="disclosure-open">disclosure-open</option>
<option value="ethiopic-numeric">ethiopic-numeric</option>
<option value="georgian">georgian</option>
<option value="gujarati">gujarati</option>
<option value="gurmukhi">gurmukhi</option>
<option value="hebrew">hebrew</option>
<option value="hiragana">hiragana</option>
<option value="hiragana-iroha">hiragana-iroha</option>
<option value="japanese-formal">japanese-formal</option>
<option value="japanese-informal">japanese-informal</option>
<option value="kannada">kannada</option>
<option value="katakana">katakana</option>
<option value="katakana-iroha">katakana-iroha</option>
<option value="khmer">khmer</option>
<option value="korean-hangul-formal">korean-hangul-formal</option>
<option value="korean-hanja-formal">korean-hanja-formal</option>
<option value="korean-hanja-informal">korean-hanja-informal</option>
<option value="lao">lao</option>
<option value="lower-alpha">lower-alpha</option>
<option value="lower-alpha">lower-alpha</option>
<option value="lower-armenian">lower-armenian</option>
<option value="lower-greek">lower-greek</option>
<option value="lower-latin">lower-latin</option>
<option value="lower-roman">lower-roman</option>
<option value="malayalam">malayalam</option>
<option value="mongolian">mongolian</option>
<option value="myanmar">myanmar</option>
<option value="oriya">oriya</option>
<option value="persian">persian</option>
<option value="simp-chinese-formal">simp-chinese-formal</option>
<option value="simp-chinese-informal">simp-chinese-informal</option>
<option value="square">square</option>
<option value="tamil">tamil</option>
<option value="telugu">telugu</option>
<option value="thai">thai</option>
<option value="tibetan">tibetan</option>
<option value="trad-chinese-formal">trad-chinese-formal</option>
<option value="trad-chinese-informal">trad-chinese-informal</option>
<option value="upper-alpha">upper-alpha</option>
<option value="upper-armenian">upper-armenian</option>
<option value="upper-latin">upper-latin</option>
<option value="upper-roman">upper-roman</option>
</select>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
</ul>
<code>
li::before {
content: counter(<counterName>, <span id="currentCounter"></span>)
}
</code>
В настоящее время доступно (по состоянию на 27 февраля 2017 г.):
- арабско-индийский
- армянин
- бенгальский
- камбоджийский
- круг
- cjk-десятичный
- cjk-земная-ветвь
- cjk-небесный ствол
- десятичная дробь
- десятичный-ведущий-ноль
- деванагари
- диск
- раскрытие закрыто
- раскрытие-открыто
- эфиопско-цифровой
- грузинский
- гуджарати
- гурмухи
- иврит
- хирагана
- хирагана-ироха
- японский-формальный
- японско-неформальный
- каннада
- катакана
- катакана-ироха
- кхмерский
- корейский-хангыль-официальный
- корейский-ханджа-формальный
- корейский-ханджа-неофициальный
- лаосский
- нижняя альфа
- нижняя альфа
- нижнеармянский
- нижнегреческий
- нижний латинский
- нижний роман
- малаялам
- монгольский
- Мьянма
- ория
- персидский
- простой китайский-формальный
- простой-китайский-неформальный
- квадрат
- тамильский
- телугу
- тайский
- тибетский
- трад-китайско-формальный
- трад-китайско-неформальный
- верхняя альфа
- верхнеармянский
- верхний латинский
- верхнеримский
Рекомендации:
person
David says reinstate Monica
schedule
05.06.2013
h1:before
наh1
- person Frederick Brummer   schedule 18.01.2019