In CSS, we introduced the pseudo elements: before and after, as well as the usage of content. This article will make some interesting applications for content matching counter. I believe it will be interesting if you are proficient.

Basic usage of counter

In CSS, counter is a very interesting function. The most common thing is that if we use list lists and choose decimal decimal decimal, the number will increase as the list grows. The bottom seems to be done with counter, because the value generated by counter does not exist in the elements of the web page, so if we use it outside the list elements, It must be achieved through:: before or:: after content.

The most basic usage of counter must have a parent element and a child element (similar to the list principle, using ul wrapped in li), so it will look like the following html:

<div>
    <span>Iron Man</span>
    <span>Captain America</span>
    <span>Raytheon sol</span>
</div>

In CSS, counter-reset:num is used for div parent element, and num is the variable of the accumulated value of the counter. Then counter-increment:num can be seen in span::before. This section is used to add num, preset value is 1, and then it is displayed through content.

The preset display syntax of the counter is counter (counter name, list-style-type)

div{
  counter-reset:num;
}
span{
  display:block;
}
span::before{
  counter-increment:num; 
  content:counter(num) '. ';
}

By specifying the initial counter-reset value and the interval value of counter-increment accumulation, the effect of starting from a certain value or displaying only even and odd numbers can be achieved.

div{
  counter-reset:num 3;
}
span{
  display:block;
}
span::before{
  counter-increment:num 2; 
  content:counter(num) '. ';
}

If you want to change the style of a number, you can also change it through the second set value list-style-type of the counter. The following example is to change the style to georgian.

div{
  counter-reset:num;
}
span{
  display:block;
}
span::before{
  counter-increment:num; 
  content:counter(num, georgian) '. ';
}

counter Advanced Usage

In addition to specifying a single variable, counter can also specify multiple variables at the same time. For example, in the following HTML paragraph, there are three categories in it. i use span, i and b to categorize them.

<div>
  <span>Iron Man</span>
  <span>Captain America</span>
  <span>Raytheon sol</span>
  <i>Aegis Bureau</i>
  <i>Gods and ghosts</i>
  <i>Neurological Bureau</i>
  <b>Hydra</b>
  <b>Nine heads of cattle</b>
  <b>Nine pigs</b>
</div>

CSS counter-reset can specify a number of variables at the beginning, separated by a blank character. If the number followed by the blank character is the starting value, there is no default number of 0, when this is set, you can see that the number codes of different categories are different.

If you encounter a nested structure, you need to expand layer by layer (e.g. 1 > 1.1 > 1.1.1). It may be a lot more complicated to adopt the above method. Fortunately, counter also provides another counters function. The purpose is to solve the troubles of the nested structure. Before you start, you can look at the list through the combination of ul and li:

<ul>
  <li>First floor
    <ul>
      <li>The second floor
        <ul>
          <li>The third level</li>
          <li>The third level</li>
          <li>The third level</li>
        </ul>
      </li>
      <li>The second floor</li>
      <li>The second floor</li>
    </ul>
  </li>
  <li>First floor</li>
  <ul>
    <li>The second floor</li>
    <li>The second floor</li>
  </ul>
</ul>

The traditional list-style can also have the function of digital continuation if it is set as decimal, but it is relatively impossible to make some special changes.

li{
  list-style:decimal;
}

Through the combination of content and counters, we can say goodbye to the problem of preset values. We can even achieve the same effect as a single list without using lists UL and li. For example, we simulate the appearance of a list through div (the state must still have the concepts of parent and child elements). The Style b in the list is ul, and the style a is li. :

<div class="a">First floor
  <div class="b">
    <div class="a">The second floor
      <div class="b">
        <div class="a">The third level</div>
        <div class="a">The third level</div>
        <div class="a">The third level</div>
      </div>
    </div>
    <div class="a">The second floor</div>
    <div class="a">The second floor</div>
  </div>
</div>
<div class="a">First floor
  <div class="b">
    <div class="a">The second floor</div>
    <div class="a">The second floor</div>
  </div>
</div>

Since there is nothing in the outer layer of b, we need to start with counter reset for both body and B. Then through the use of counters, we can put the counter values one by one, so that we can achieve the effect that the original list is not easy to achieve.

Counters use the grammar: counters (counter name, separator, list-style-type)

body, .b{
  counter-reset:c;
}
.a::before{
  content:counters(c, ".") ": ";
  counter-increment:c; 
}
div{
  margin-left:10px;
}

After understanding the principle, through the interactive application of:: before and:: after, we can make a very distinctive list effect.

body, .b{
  counter-reset:c;
}
.a{
  box-sizing:border-box;
  position:relative;
  line-height:40px;
}

.a .a{
  padding-left:30px;
}

.a::after{
  content:'';
  box-sizing:border-box;
  display:inline-block;
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  width:100%;
  height:40px;
  margin-left:30px;
  box-shadow:inset 0 2px #666;
  background:#eee;
}
.a::before{
  content:counter(c, upper-roman);
  counter-increment:c;
  display:inline-block;
  width:30px;
  height:40px;
  background:#666;
  color:#fff;
  text-align:center;
  margin-right:5px;
}