The **`counter-increment`** property in #key# CSS: Cascade Style Sheets #key# is used to *increase or decrease* the value of the counter in CSS. 

---
> This property is used with the `content` and the `counter-reset` property. 
---

# 
## Syntax

---
```css
counter-increment: none|id|initial|inherit;
```
---

# 
#  Property values

- **`none`**: This is the default value, and by using this, we can not change the counter's value.

- **`id`**: It is used to specify which counter has to be incremented and also to specify that how much we want to increment. The default increment value is 1. 

- **`initial`**: This sets the value to its default value.

- **`inherit`**: This inherits property from its parent value.
##
## 
## Code

The following is the basic #key# HTML: HyperText Markup Language #key# & CSS code to demonstrate the use of the `counter-increment` property:

<title>Example</title>

<h1>Behzad</h1>	
<p>Content Creator.</p>

<h1>Abubakr</h1>
<p>Developer.</p>

<h1>Nouman</h1>	
<p>Web Developer.</p>

body 
{
  line-height: 1em;
  counter-reset: count;
}
h1 
{
  font-size: 20px;
}
h1:before 
{
  content: "Employee" counter(count) ": ";
  counter-increment: count;
}

codemirror

# 
## Explanation

In this example, we can see that we have made the counter on *Employee*. So, when we add the details of any employee, it is automatically incremented by 1. 

What is the CSS counter-increment property?

Used in CSS to alter the counter’s value, paired with content and counter-reset properties.