Can ordered list produce result that looks like 1 1 1 2 1 3 instead of just 1 2 3 with css

Question

Can an ordered list produce results that looks like 1 1  1 2  1 3  instead of just 1  2  3       with CSS  So far  using list-style-type decimal has produced only 1  2  3   not 1 1  1 2   1 3

User · Answer

The following worked for me   ol     list-style-type  none    counter-reset  item    margin  0    padding  0     ol  gt  li     display  table    counter-increment  item    margin-bottom  0 6em     ol  gt  li before     content  counters item               display  table-cell    padding-right  0 6em     li ol  gt  li     margin  0     li ol  gt  li before     content  counters item                 Look at  http   jsfiddle net rLebz84u 2   or this one http   jsfiddle net rLebz84u 3  with more and justified text

User · Answer

lt html gt       lt head gt           lt meta http-equiv  Content-Type  content  text html  charset utf-8  gt           lt meta name  author  content  Sandro Alvares - KingRider  gt       lt  head gt       lt body gt           lt style type  text css  gt              li title                    font-size  20px                   font-weight  lighter                   padding  15px                   counter-increment  ordem                              foo                    counter-reset  foo                   padding-left  15px                              foo li                    list-style-type  none                              foo li before                    counter-increment  foo                   content  counter ordem      counter foo                               lt  style gt           lt ol gt               lt li class  title  gt TITLE ONE lt  li gt               lt ol class  foo  gt                   lt li gt text 1 one lt  li gt                   lt li gt text 1 two lt  li gt                   lt li gt text 1 three lt  li gt                   lt li gt text 1 four lt  li gt               lt  ol gt               lt li class  title  gt TITLE TWO lt  li gt               lt ol class  foo  gt                   lt li gt text 2 one lt  li gt                   lt li gt text 2 two lt  li gt                   lt li gt text 2 three lt  li gt                   lt li gt text 2 four lt  li gt               lt  ol gt               lt li class  title  gt TITLE THREE lt  li gt               lt ol class  foo  gt                   lt li gt text 3 one lt  li gt                   lt li gt text 3 two lt  li gt                   lt li gt text 3 three lt  li gt                   lt li gt text 3 four lt  li gt               lt  ol gt           lt  ol gt       lt  body gt   lt  html gt    Result  http   i stack imgur com 78bN8 jpg

User · Answer

this is proper code if you want to first child li resize of other css    lt style gt      li title            font-size  20px            counter-increment  ordem           color  0080B0             my ol class            counter-reset  my ol class           padding-left  30px  important              my ol class li              display  block          position  relative              my ol class li before            counter-increment  my ol class           content  counter ordem      counter my ol class                position  absolute          margin-right  100           right  10px     space between number and text              li title ol li           font-size  15px           color  5E5E5E         lt  style gt    in html file            lt ol gt               lt li class  title  gt   lt p class  page-header list title  gt Acceptance of Terms   lt  p gt                   lt ol class  my ol class  gt                       lt li gt                            lt p gt                              my text 1                           lt  p gt                       lt  li gt                       lt li gt                           lt p gt                              my text 2                           lt  p gt                       lt  li gt                   lt  ol gt               lt  li gt           lt  ol gt

User · Answer

You can use counters to do so      The following style sheet numbers nested list items as  1    1 1    1 1 1   etc   OL   counter-reset  item   LI   display  block   LI before   content  counters item            counter-increment  item      Example    x000D   x000D  ol   counter-reset  item   x000D  li  display  block   x000D  li before   content  counters item            counter-increment  item   x000D   lt ol gt  x000D     lt li gt li element x000D       lt ol gt  x000D         lt li gt sub li element lt  li gt  x000D         lt li gt sub li element lt  li gt  x000D         lt li gt sub li element lt  li gt  x000D       lt  ol gt  x000D     lt  li gt  x000D     lt li gt li element lt  li gt  x000D     lt li gt li element x000D       lt ol gt  x000D         lt li gt sub li element lt  li gt  x000D         lt li gt sub li element lt  li gt  x000D         lt li gt sub li element lt  li gt  x000D       lt  ol gt  x000D     lt  li gt  x000D   lt  ol gt  x000D   x000D   x000D    See Nested counters and scope for more information

User · Answer

I needed to add this to the solution posted in 12 as I was using a list with a mixture of ordered list and unordered lists components  content  no-close-quote seems like an odd thing to add I know  but it works     ol ul li before       content  no-close-quote      counter-increment  none      display  list-item      margin-right  100       position  absolute      right  10px

User · Answer

The chosen answer is a great start  but it essentially forces list-style-position  inside  styling on the list items  making wrapped text hard to read  Here s a simple workaround that also gives control over the margin between the number and text  and right-aligns the number as per the default behaviour   ol       counter-reset  item    ol li       display  block      position  relative    ol li before       content  counters item               counter-increment  item      position  absolute      margin-right  100       right  10px     space between number and text        JSFiddle  http   jsfiddle net 3J4Bu

User · Answer

I have some problem when there are two lists and second one is inside DIV Second list should start at 1  not 2 1   lt ol gt       lt li gt lorem lt  li gt       lt li gt lorem ipsum lt  li gt   lt  ol gt    lt div gt       lt ol gt           lt li gt lorem  should be 1   lt  li gt           lt li gt lorem ipsum   should be 2   lt  li gt       lt  ol gt   lt  div gt    http   jsfiddle net 3J4Bu 364   EDIT  I solved the problem by this http   jsfiddle net hy5f6161

User · Answer

Note  Use CSS counters to create nested numbering in a modern browser  See the accepted answer  The following is for historical interest only     If the browser supports content and counter    x000D   x000D   foo   x000D    counter-reset  foo  x000D    x000D   foo li   x000D    list-style-type  none  x000D    x000D   foo li  before   x000D    counter-increment  foo  x000D    content   1   counter foo       x000D    x000D   lt ol class  foo  gt  x000D     lt li gt uno lt  li gt  x000D     lt li gt dos lt  li gt  x000D     lt li gt tres lt  li gt  x000D     lt li gt cuatro lt  li gt  x000D   lt  ol gt  x000D   x000D   x000D

User · Answer

In the near future you may be able to use the   marker psuedo-element to achieve the same result as other solutions in just one line of code   Remember to check the Browser Compatibility Table as this is still an experimental technology  At the moment of writing only Firefox and Firefox for Android  starting from version 68  support this    Here is a snippet that will render correctly if tried in a compatible browser   x000D   x000D    marker   content  counters list-item            x000D  li   padding-left  0 5em   x000D   lt ol gt  x000D     lt li gt li element x000D       lt ol gt  x000D         lt li gt sub li element lt  li gt  x000D         lt li gt sub li element lt  li gt  x000D         lt li gt sub li element lt  li gt  x000D       lt  ol gt  x000D     lt  li gt  x000D     lt li gt li element lt  li gt  x000D     lt li gt li element x000D       lt ol gt  x000D         lt li gt sub li element lt  li gt  x000D         lt li gt sub li element lt  li gt  x000D         lt li gt sub li element lt  li gt  x000D       lt  ol gt  x000D     lt  li gt  x000D   lt  ol gt  x000D   x000D   x000D    You may also want to check out this great article by smashingmagazine on the topic

User · Answer

None of solutions on this page works correctly and universally for all levels and long  wrapped  paragraphs  It   s really tricky to achieve a consistent indentation due to variable size of marker  1   1 2  1 10  1 10 5        it can   t be just    faked     not even with a precomputed margin padding for each possible indentation level     I finally figured out a solution that actually works and doesn   t need any JavaScript   It   s tested on Firefox 32  Chromium 37  IE 9 and Android Browser  Doesn t work on IE 7 and previous   CSS   ol     list-style-type  none    counter-reset  item    margin  0    padding  0     ol  gt  li     display  table    counter-increment  item    margin-bottom  0 6em     ol  gt  li before     content  counters item               display  table-cell    padding-right  0 6em         li ol  gt  li     margin  0     li ol  gt  li before     content  counters item                Example    Try it on JSFiddle  fork it on Gist

User · Answer

The solutions posted here did not work well for me  so I did a mixture of the ones of this question and the following question  Is it possible to create multi-level ordered list in HTML      Numbered lists like 1  1 1  2 2 1       ol li  display block      hide original list counter    ol  gt  li first-child  counter-reset  item      reset counter    ol  gt  li  counter-increment  item  position  relative      increment counter    ol  gt  li before  content counters item             position  absolute  margin-right  100   right  10px      print counter      Result      Note  the screenshot  if you wish to see the source code or whatever is from this post  http   estiloasertivo blogspot com es 2014 08 introduccion-running-lean-y-lean html

[html] Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?

Examples related to html

Examples related to css