Set Margin (Indent) Based on Counter Value in CSS

Set margin (indent) based on counter value in CSS

For a Small Set

If you are dealing with a small set of section elements next to each other (as your sample shows), then using the adjacent sibling selector (or nth-of-type if only CSS3 support is desired) will get you what you want without counting. However, probably much more than about five elements and the css could get too cumbersome, so if you are looking at this for hundreds of elements, it is not practical.

section { margin-left: 0}
section + section {margin-left: 1em}
section + section + section {margin-left: 2em}

CSS - Use counter() number as property's value

It only works inside the content property, not like a variable the way you are thinking of it. If you view it in DevTools or the like, it's not an integer. You'd still see counter(myCounter) in there.

"In CSS 2.1, the values of counters can only be referred to from the 'content' property." source

CSS, UL/OL: Incorrect indent with custom counter

Here is one approach:

ol.wrong {
  margin-left: 0;
  padding-left: 20px;
  counter-reset: counter_level1;
  list-style: none outside none;
  display: block;
  line-height: 18px;
  width: 500px;
}
ol.wrong li {
  position: relative;
  list-style: none;
  margin-right:20px;
  padding-left: 20px; /* create some space for the counter label */
  outline: 1px dotted blue;
}
ol.wrong li:before {
  display: inline-block; /* block would also work */
  position: absolute; /* move this out of the way of the text*/
  left: 0; /* move the counter labe into the space from the padding */
  content: counter(counter_level1) ". ";
  counter-increment: counter_level1;
  font-weight: bold;
  width: 20px;
}

and you can check the code at: http://jsfiddle.net/audetwebdesign/wsmnJ/

The pseudo-element trick is quite useful, and a good choice in this application.

Start by adding some padding to the left for ol.wrong li, this will create some white space for placing your label.

In your pseudo-element styling, ol.wrong li:before, use position: absolute to remove the label out of the way of the text and position it left: 0. The display type can be either block or inline-block.

You then follow suit for the inner, nested ol.

Just created padding to the left equal in width to the width that you need for your counter/label element.

Auto indenting lines in html using css

Edit:

Actually it is possible to automatically indent elements based on the net sum of preceding "open" (+1) and "close" (-1) elements if you use a CSS counter() function.

You can increment and decrement a counter for each .open and .close element, respectively. Then you can use the @counter-style CSS at-rule to create a custom counter style. Setting the system to symbolic will let you output N number of a specified symbol, where N is equal to the counter's value. Setting symbols to a couple non-breaking spaces lets the counter act as an indenter, indenting the contents of the element to the correct level:

@counter-style custom {
  system: symbolic;
  symbols: '\2003\2003';
}
.parent {
  border: 1px solid black;
  margin: 1rem;
  padding: 1rem 1rem 1rem 0;
  font-family: monospace;
  counter-set: level 0;
}
.open,
.close {
  color: #b75301;
}
.open:first-child,
:not(.close) + .open,
.content {
  counter-increment: level 1;
}
:not(.open) + .close {
  counter-increment: level -1;
}
.open:before,
.open:after,
.close:before,
.close:after {
  color: black;
}
.open:after,
.close:after {
  content: '>';
}
.open:before {
  content: counter(level, custom) '<';
}
.close:before {
  content: counter(level, custom) '</';
}
.content:before {
  content: counter(level, custom);
}

<div class="parent">
  <div class="open">html</div>
  <div class="open">head</div>
  <div class="open">style</div>
  <div class="close">style</div>
  <div class="close">head</div>
  <div class="open">body</div>
  <div class="open">p</div>
  <div class="content">Lorem Ipsum</div>
  <div class="close">p</div>
  <div class="close">body</div>
  <div class="close">html</div>
</div>

How to keep indent for second line in ordered lists via CSS?

Update

This answer is outdated. You can do this a lot more simply, as pointed out in another answer below:

ul {
  list-style-position: outside;
}

See https://www.w3schools.com/cssref/pr_list-style-position.asp

Original Answer

I'm surprised to see this hasn't been solved yet. You can make use of the browser's table layout algorithm (without using tables) like this:

ol {
    counter-reset: foo;
    display: table;
}

ol > li {
    counter-increment: foo;
    display: table-row;
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell; /* aha! */
    text-align: right;
}

Demo: http://jsfiddle.net/4rnNK/1/

To make it work in IE8, use the legacy :before notation with one colon.

CSS increasing margin on successive list elements

Obvious answer first, this is what heirarchy is for, so most will recommend using nested uls:

<ul>

  <li>001

    <ul>

      <li>002

        <ul>

          <li>003</li>

        </ul>

      </li>

    </ul>

  </li>

</ul>

li:before {
    float: left;
    content: "\00a0";
    width: 20px;
    border: 1px solid transparent;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

ul {
    list-style: none;
    padding-left: 0;
}​

ul {

  list-style: none;

  padding-left: 0;

}

<ul>

  <li>a</li>

  <li>b</li>

  <li>c</li>

</ul>

.test {
  margin-left: 5em;
  width: 5em;
  text-indent: -2em;
  list-style-type: none;
  position:relative;
  z-index:0;
}
.test:hover {
  background: lime;
}
.test:hover::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  right:100%;
  width:2em;
  background: inherit;
}

<li class="test">hello world this is a test</li>