The CSS counter realizes the automatic notification of the excess quantity in Jiugongge

I often see such a nine-square design in some apps. When there are less than 9 thumbnails, they will be arranged normally. When there are more than 9 thumbnails, there will be a reminder of how many are left, as follows:

How to use pure CSS to achieve this effect? Let's take a look

1. Jiugongge layout

The layout is very simple, a very ordinary nine-square grid layout, grid is used here

<ul class="list">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
    ...
</ul>

Here the square can be aspect-ratio , the corresponding CSS is as follows

.list{
  position: relative;
  display: grid;
  width: 300px;
  margin: auto;
  grid-template-columns: repeat(3,1fr);
  list-style: none;
  padding: 0;
  gap: 2px;
}
.item{
  aspect-ratio: 1;/*宽高比1:1*/
}

The effect is as follows

So, how to automatically prompt the number of remaining sheets when there are more than 9 sheets? Then look down

Two, CSS counter

Speaking of sequence, naturally think of CSS counter , now we add the counter

.list{
  /*...*/
  counter-reset: count; /*初始化*/
}

Then display the number in each .item , you can use the pseudo element ::after

.item{
  counter-increment: count;
}
.item::after{
  content: counter(count);
  /*其他样式*/
  display: grid;
  height: 100%;
  place-content: center;
  font-size: 30px;
  color: #fff;
}

This can get the following effects

The numbers are displayed, but now there are two problems:

1. When the number exceeds 9, the excess pictures will not be hidden
2. This number is not the number of excess pictures, but the total

Three, hide beyond the picture

This is actually very easy. Since the number is fixed, it can be achieved nth-child ~

.item:nth-child(9)~.item{
  /*选择第9个以后的元素*/
  visibility: hidden;
}

This place is to visibility: hidden . The reason is that this attribute will not affect the calculation of the counter. If display:none is used, the counting will be skipped.

4. Count the number of excesses

At present, because it starts counting from the first one, finally counts the number of the entire list , but we can specify to start counting from the tenth one. What effect will we get? In order to facilitate the demonstration, temporarily turn on the hidden

.item{
  /*counter-increment: count;*/
}
.item:nth-child(9)~.item{
  /*从第10个开始计数*/
  counter-increment: count;
}
.item:nth-child(9)~.item::after{
  content: counter(count);
} 

As you can see, after counting from the 10th, the last number of

Now put the last picture in the lower right corner (absolute positioning), the last picture can .item:nth-child(9)~.item:last-child , which means the last picture after the 9th picture, the realization is as follows

.item:nth-child(9)~.item{
  position: absolute;
  width: calc(100% / 3 - 1px);
  counter-increment: count;
  visibility: hidden;
  right: 0;
  bottom: 0;
}
.item:nth-child(9)~.item:last-child::after{
  visibility: visible;
  background-color: rgba(0,0,0,.2);
}

In this way, the effect of pure CSS automatically prompting the remaining pictures is realized, as shown below

Here add and remove is to demonstrate the dynamic modification of the number of nodes, which has nothing to do with the interaction logic

The complete code can be accessed at list-counter (codepen.io)

Five, other initialization methods

In the previous implementation, we manually specify to start counting from the 10th element

.item:nth-child(9)~.item{
  /*从第10个开始计数*/
  counter-increment: count;
}

In fact, there is another way worth trying, which is to directly specify the initial value of the counter, the default is 0, and now it is enough to change to -9. The implementation is as follows

.list{
  /*...*/
  counter-reset: count -9; /*初始化为-9*/
}

initialization ideas, the rest is the same logic as before, the complete code can be accessed 160ebf691adee1 list-counter-reset (codepen.io)

Six, summary and explanation

This case is over here, a low-cost CSS tip, although not many, but very practical, especially the use of selectors, maybe it will be used sometime in the future. CSS counters can be said to be very flexible and powerful, and careful digging should be able to achieve more practical effects. Here is a summary:

1. If you don’t consider compatibility in Jiugongge layout, use grid layout first
2. Adaptive square can be implemented using aspect-ratio
3. When encountering sequence-related layouts, give priority to CSS counters
4. Flexible use of CSS selectors, nth-child(n) and ~ can be combined to select the nth and subsequent elements
5. You can specify to start counting from the nth element
6. You can specify the initial value of the counter
7. There is no compatibility problem with CSS counter, so you can use it with confidence

If you think it's not bad, if it is helpful to you, please like, bookmark, and forward ❤❤❤