Pure css realizes automatic addition of serial number to the list

We write style The digital ranking list is occasionally used in the code Design , ranking by serial number, for example: beautiful mipCms theme Top/hot reviews in:

If the li element is used with list style: decimal; Attribute, there will be an English full stop followed by the number, which cannot meet the effect we want; If a separate element is added to place serial numbers or images, it is a bit of a fuss and increases the amount of page code.

At this time, we can try to use pseudo elements combined with the counter amendment attribute to simply achieve the effect we want. The specific code is as follows:

html code

 <ul> <li>Beautiful corporate brand marketing theme</li> <li>Beautiful Online Consultation feedback plug-in </li> <li>Exhibition theme of beautiful Chinese style products</li> <li>Beautiful and free version enterprise station Responsive Theme</li> <li>Beautiful and luxurious version response Style Theme</li> </ul>

Css style

 ul {     margin: 0;     padding: 0;     counter-reset: li; } ul > li:before {     content: counter(li);     counter-increment: li; }

As for the top three different backgrounds colour It can be realized by combining nth child selector

 ul > li:nth-child(1):before,ul > li:nth-child(2):before,ul > li:nth-child(3):before{color: #fff;} ul > li:nth-child(1):before {     background: #FF6B57; } ul > li:nth-child(2):before {     background: #2ea7e0; } ul > li:nth-child(3):before {     background: #6bc30d; }