Счетчики псевдоэлементов CSS: можно ли увеличить букву алфавита a, b, c и т. д. вместо числа?

Как определено здесь:

http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment

Вы можете использовать следующий код для увеличения чисел в псевдоэлементах.

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

Есть ли способ использовать один и тот же код для увеличения букв, таких как «a», «b», «c» и т. д.?

Благодарю вас!


person HandiworkNYC.com    schedule 05.06.2013    source источник
comment
Это не сработало для меня как есть, мне пришлось переместить объявление счетчика приращения с h1:before на h1   -  person Frederick Brummer    schedule 18.01.2019


Ответы (1)


Да, второй аргумент 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(&lt;counterName&gt;, <span id="currentCounter"></span>)
  }
</code>

В настоящее время доступно (по состоянию на 27 февраля 2017 г.):

  • арабско-индийский
  • армянин
  • бенгальский
  • камбоджийский
  • круг
  • cjk-десятичный
  • cjk-земная-ветвь
  • cjk-небесный ствол
  • десятичная дробь
  • десятичный-ведущий-ноль
  • деванагари
  • диск
  • раскрытие закрыто
  • раскрытие-открыто
  • эфиопско-цифровой
  • грузинский
  • гуджарати
  • гурмухи
  • иврит
  • хирагана
  • хирагана-ироха
  • японский-формальный
  • японско-неформальный
  • каннада
  • катакана
  • катакана-ироха
  • кхмерский
  • корейский-хангыль-официальный
  • корейский-ханджа-формальный
  • корейский-ханджа-неофициальный
  • лаосский
  • нижняя альфа
  • нижняя альфа
  • нижнеармянский
  • нижнегреческий
  • нижний латинский
  • нижний роман
  • малаялам
  • монгольский
  • Мьянма
  • ория
  • персидский
  • простой китайский-формальный
  • простой-китайский-неформальный
  • квадрат
  • тамильский
  • телугу
  • тайский
  • тибетский
  • трад-китайско-формальный
  • трад-китайско-неформальный
  • верхняя альфа
  • верхнеармянский
  • верхний латинский
  • верхнеримский

Рекомендации:

person David says reinstate Monica    schedule 05.06.2013
comment
И, конечно же, ссылка на ту часть спецификации, в которой это упоминается: w3.org/TR/CSS21/generate.html#counter-styles (поскольку ОП связана со спецификацией) - person BoltClock; 05.06.2013