Счетчики псевдоэлементов 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;
}

Есть ли способ, которым вы можете использовать тот же код для увеличения букв, таких как «а», «б», «с», так далее?

Спасибо!

 Frederick Brummer18 янв. 2019 г., 21:45
Это нене работать для меня, как есть, я должен был переместить "Счетчик-инкремент» декларация отh1:before вh1

Ответы на вопрос(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);
}

  one
  two
  three

JS Fiddle demo.

Другие включают в себя:,,,,,,,,,,,.decimaldecimal-leading-zerolower-romanupper-romanlower-greeklower-latinupper-latinarmeniangeorgianlower-alphaupper-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;
}
Please select a CSS counter:

  arabic-indic
  armenian
  bengali
  cambodian
  circle
  cjk-decimal
  cjk-earthly-branch
  cjk-heavenly-stem
  decimal
  decimal-leading-zero
  devanagari
  disc
  disclosure-closed
  disclosure-open
  ethiopic-numeric
  georgian
  gujarati
  gurmukhi
  hebrew
  hiragana
  hiragana-iroha
  japanese-formal
  japanese-informal
  kannada
  katakana
  katakana-iroha
  khmer
  korean-hangul-formal
  korean-hanja-formal
  korean-hanja-informal
  lao
  lower-alpha
  lower-alpha
  lower-armenian
  lower-greek
  lower-latin
  lower-roman
  malayalam
  mongolian
  myanmar
  oriya
  persian
  simp-chinese-formal
  simp-chinese-informal
  square
  tamil
  telugu
  thai
  tibetan
  trad-chinese-formal
  trad-chinese-informal
  upper-alpha
  upper-armenian
  upper-latin
  upper-roman


  one
  two
  three
  four
  five
  six
  seven
  eight
  nine
  ten


<code>
  li::before {
    content: counter(<counterName>, <span id="currentCounter"></span>)
  }
</code>

В настоящее время доступны (по состоянию на 2017-02-27):

арабский-IndicармянинбенгальскийкамбоджийскийкругДальневосточные-десятичногоДальневосточные-земной ГисаCJK-небесного-стволовойдесятичныйдесятичное ведущий нулядеванагаридискРаскрытие-замкнутыйРаскрытие открытойЭфиопский-цифровойгрузинскийгуджаратиГурмухиивритхираганахираган-Irohaяпонский-формальныйяпонский-неформальнаяканнадакатаканакатакан-Irohaкхмерскийкорейский-хангул-формальныйкорейская-Ханджа-формальнаякорейская-Ханджа-неформальнаялаонизший-альфанизший-альфанизший армяниннизший греческийниже латыньнизший романскиймалаяламонгольскийМьянмаОрияперспростофиля-китайский-формальныйпростофиля-китайский-неформальнаяплощадьтамильскийтелугутайскийтибетскийтрад-китайский-формальныйтрад-китайский-неформальнаяВерхняя-альфаверхний армянинВерхняя латыньВерхняя-римской

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

list-style-typeСгенерированный контент, автоматическая нумерация и списки » от W3 (сейчас устаревший). "CSS Counter Styles, Level 3, " от W3.
 j-man8605 июн. 2013 г., 17:30
Спасибо! Это тоже хороший ресурсcss-tricks.com/numbering-in-style
 Bhimbim27 февр. 2017 г., 13:16
спасибо!
 MCTaylor1727 окт. 2017 г., 22:19
Хорошо, спасибо за совет.
 David Thomas05 июн. 2013 г., 17:31
Вы'очень приветствую; Я'Я рад, что помог! знак равно
 BoltClock05 июн. 2013 г., 17:33
И, конечно же, ссылка на ту часть спецификации, которая упоминает это:w3.org/TR/CSS21/generate.html#counter-styles (поскольку ОП связана со спецификацией)

Ваш ответ на вопрос