Html Question posted in
Some basic documentation can be found here.

Html – Numbering system using counter in css

I want to create a counter or numbering system in HTML and CSS, but the sub-counter isn’t working properly.

This is what i have done so far, im gonna make a new counter in body and then a sub-counter in a class name second and then increase each of them in Pseudo-elements.

body {
  counter-reset: css-counters 0; 
}
.first {
  position: relative;
  left: 90px;
  top: 10px;
  right: auto;
  bottom: auto;
  padding: 10px;
}

.first:before {
  counter-increment: css-counters; 
  content: "Điều " counter(css-counters) " "; 
  position: absolute; 
  left: -60px; 
  top: 0; 
}

.first .second {
  counter-reset: sub-counter; 
  position: relative; 
}

.first .second:first-child {
  counter-reset: sub-counter; 
}

.first .second:not(:first-child) {
  counter-increment: sub-counter 0;
}

.first .second:before {
  counter-increment: sub-counter; 
  content: counter(css-counters) "." counter(sub-counter) " "; 
  position: absolute; 
  left: -60px;
  top: 0; 
}
<body contenteditable="true">
  <div class="first">
    CẤP HẠN MỨC TÍN DỤNG:
    <div class="second">
      <span id="dieu1_key4" class="bold">Hạn Mức Tín Dụng:</span>
      <span id='dieu1_key5'>...</span>
    </div>
    <div class="second">
      <span id="dieu1_key4" class="bold">Hạn Mức Tín Dụng:</span>
      <span id='dieu1_key5'>...</span>
    </div>
  </div>
  <div class="first">
    CẤP TÍN DỤNG THEO HẠN MỨC TÍN DỤNG
  </div>
</body>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the solution: just a minor change in css 

    body {
    counter-reset: css-counters 0;
  }
  .first {
    position: relative;
    left: 90px;
    right: auto;
    bottom: auto;
    padding: 10px;
  }

  .first:before {
    counter-increment: css-counters;
    content: "Điều " counter(css-counters) " ";
    position: absolute;
    left: -60px;
    top: 10px;
    counter-reset: sub-counter;
  }

  .first .second {
    position: relative;
  }

  .first .second:before {
    counter-increment: sub-counter;
    content: counter(css-counters) "." counter(sub-counter) " ";
    position: absolute;
    left: -60px;
    top: 0;
  }


  2. 0

    You are defining your sub-counter to increment by 0. Here’s the fixed code.

    body {
  counter-reset: css-counters 0; 
}
.first {
  position: relative;
  left: 90px;
  top: 10px;
  right: auto;
  bottom: auto;
  padding: 10px;
}

.first:before {
  counter-increment: css-counters; 
  content: "Điều " counter(css-counters) " "; 
  position: absolute; 
  left: -60px; 
  top: 0; 
}

.first .second {
  counter-reset: sub-counter; 
  position: relative; 
}

.first .second:first-child {
  counter-reset: sub-counter; 
}

.first .second:not(:first-child) {
  counter-increment: sub-counter; // Here remove the 0 or set it to 1
}

.first .second:before {
  counter-increment: sub-counter; 
  content: counter(css-counters) "." counter(sub-counter) " "; 
  position: absolute; 
  left: -60px;
  top: 0; 
}
    <body contenteditable="true">
  <div class="first">
    CẤP HẠN MỨC TÍN DỤNG:
    <div class="second">
      <span id="dieu1_key4" class="bold">Hạn Mức Tín Dụng:</span>
      <span id='dieu1_key5'>...</span>
    </div>
    <div class="second">
      <span id="dieu1_key4" class="bold">Hạn Mức Tín Dụng:</span>
      <span id='dieu1_key5'>...</span>
    </div>
  </div>
  <div class="first">
    CẤP TÍN DỤNG THEO HẠN MỨC TÍN DỤNG
  </div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search