search

Home >Web Front-end >CSS Tutorial >CSS counter reset property

CSS counter reset property

WBOY
WBOYforward
2023-09-04 22:05:091412browse

CSS 计数器重置属性

To create or reset a counter using CSS, use the counter-reset property.

You can try running the following code to implement counter-resetAttribute

Example

Live demonstration

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            counter-reset: section;
         }
         h2::before {
            counter-increment: section;
            content: "Fruit " counter(section) " - ";
         }
      </style>
   </head>
   <body>
      <h1>Fruits</h1>
      <h2>Mango</h2>
      <h2>Kiwi</h2>
   </body>
</html>

The above is the detailed content of CSS counter reset property. For more information, please follow other related articles on the PHP Chinese website!

css
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：CSS voice-family propertyNext article：CSS voice-family property

Related articles

See more