All geek questions in one place

Left-align numbers to the right and left-align text in ordered lists using CSS

When compiling the documentation, I created a schema using ordered lists in ordered lists and applied pseudo-legal-style line numbering using CSS. The default behavior of lists is right-alignment and left-alignment of text; however, the CSS2 snippet I'm using changes this behavior, so the numbers are left aligned and the text, although left justification is wrong. See the following examples:

Default behavior (number 10 highlights the desired alignment):

 1. Item
 2. Item
    1. Item
    2. Item
       1. Item
       2. Item
 3. Item
 ...
10. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nunc et diam sem.   Pellentesque vitae dolor id eros commodo 
    dapibus tristique sit amet eros. Pellentesque turpis turpis.

( 10 ):
CSS2 http://www.w3.org/TR/CSS2/generate.html

OL { counter-reset: item }
LI { display: block }
LI:before { content: "("counters(item, ".") ") "; counter-increment: item }

:

 (1) Item
 (2) Item
     (2.1) Item
     (2.2) Item
           (2.2.1) Item
           (2.2.2) Item
 (3) Item
 ...
 (10) Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Nunc et diam sem.   Pellentesque vitae dolor id eros commodo 
 dapibus tristique sit amet eros. Pellentesque turpis turpis.

, LI { display: block } LI:before "" . , ?

, :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Outline</title>
<style type="text/css">
ol {
counter-reset: item;
list-style-position: outside
}
li {
display: block;
padding-left: 10px;
}
li:before {
content: "("counters(item, ".") ") ";
counter-increment: item
}
</style>
</head>

<body>
<h1>Outline</h1>
<ol>
  <li>Item</li>
  <li>Item
    <ol>
      <li>Item</li>
      <li>Item
        <ol>
          <li>Item</li>
          <li>Item</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nunc et diam sem.   Pellentesque vitae dolor id eros commodo 
    dapibus tristique sit amet eros. Pellentesque turpis turpis.</li>
</ol>
</body>
</html>
+3
1

:

ol {
    width: 10em;
    counter-reset: item;
    list-style-position: outside;
}

li {
    position: relative;
    left: 2em;
    display: block;
    list-style-position: outside;
}

li:before {
    content: "("counters(item, ".") ") ";
    counter-increment: item;
    position: absolute;
    left: -2.5em;
}

li li:before {
    left: -2.5em;
}

li li li:before {
    left: -3em;
}

position: relative;, li (left: 2em;), li:before .

- left: li:before, li li: before and li li li: before`, , .

, : http://jsbin.com/asaru3

OP:

, , , . , "li li li li" , 4 , ? , , . ?

, .

: " , " li li li [li: before] " ... 4 ?" , , . .

, , , ?

css li:before:

li:before {
    content: "("counters(item, ".") ") ";
    counter-increment: item;
    position: absolute;
    left: -2.5em;
    display: block;
    width: 2em; /* to give the same dimensions to all counter 'blocks' */
    text-align: right; /* does exactly what you'd think =) */
}

, li:before , left: li, .

, li li:before, li li li:before -.

: http://jsbin.com/ovuru3

+3

Source: https://habr.com/ru/post/1759186/

More articles:


All Articles