diff --git a/snippets/counter.md b/snippets/counter.md
index d413f8ae..3aee6c59 100644
--- a/snippets/counter.md
+++ b/snippets/counter.md
@@ -5,77 +5,55 @@ Counters are, in essence, variables maintained by CSS whose values may be increm
 #### HTML
 
 ```html
-<section class="countable-section">
-  <div class="countable-item">
-    <p>Some item</p>
-    <div class="countable-section">
-      <p>First sub item</p>
-      <p>Second sub item</p>
-      <p>Third sub item</p>
-    </div>
-  </div>
-  <div class="countable-item">
-    <p>Second other item</p>
-  </div>
-  <div class="countable-item">
-    <p>Third item</p>
-  </div>
-  <div class="countable-item">
-    <p>Fourth item</p>
-  </div>
-</section>
+<ul>
+  <li>List item</li>
+  <li>List item</li>
+  <li>List item</li>
+</ul>
 ```
 
 #### CSS
 
 ```css
-.countable-section {
-  counter-reset: counter1;
-}
-.countable-item p {
-  counter-increment: counter1;
+ul {
+  counter-reset: counter;
 }
-.countable-item p:before {
-  content: counters(counter1, '-') ' ';
-  font-weight: bold; /* for better visualization on demo */
+
+li::before {
+  counter-increment: counter;
+  content: counters(counter, '.') ' ';
 }
 ```
 
 #### Demo
 
 <div class="snippet-demo">
-	<section class="snippet-demo__countable-section">
-		<div class="snippet-demo__countable-item">
-			<p>Some item</p>
-			<div class="snippet-demo__countable-section">
-					<p>First sub item</p>
-					<p>Second sub item</p>
-					<p>Third sub item</p>
-			</div>
-		</div>
-		<div class="snippet-demo__countable-item">
-			<p>Second other item</p>
-		</div>
-		<div class="snippet-demo__countable-item">
-			<p>Third item</p>
-		</div>
-		<div class="snippet-demo__countable-item">
-			<p>Fourth item</p>
-		</div>
-	</section>
+	<div class="snippet-demo__countable-section">
+    <ul>
+      <li>List item</li>
+      <li>List item</li>
+      <li>
+        List item
+        <ul>
+          <li>List item</li>
+          <li>List item</li>
+          <li>List item</li>
+        </ul>
+      </li>
+    </ul>
+  </div>
 </div>
 
 <style>
-.snippet-demo__countable-section {
-  counter-reset: counter1;
-}
-.snippet-demo__countable-item p {
-  counter-increment: counter1;
-}
-.snippet-demo__countable-item p:before {
-  content: counters(counter1, '.') ' ';
-	font-weight: bold;
-}
+  .snippet-demo__countable-section ul {
+    counter-reset: counter;
+    list-style-type: none;
+  }
+
+  .snippet-demo__countable-section li::before {
+    counter-increment: counter;
+    content: counters(counter, '.') ' ';
+  }
 </style>
 
 #### Explanation
@@ -86,7 +64,7 @@ You can create a ordered list using any type of HTML.
 
 2. `counter-increment` Used in element that will be countable. Once `counter-reset` initialized, a counter's value can be increased or decreased.
 
-3. `counter(variable_name, style)` Displays the value of a section counter. Generally used in a `content` property. This function can recieve two parameters, the first as the name of the counter and the second one can be `decimal` or `upper-roman` (`decimal` by default).
+3. `counter(name, style)` Displays the value of a section counter. Generally used in a `content` property. This function can recieve two parameters, the first as the name of the counter and the second one can be `decimal` or `upper-roman` (`decimal` by default).
 
 4. `counters(variable_name, separator, style)` Displays the value of a section counter. Generally used in a `content` property. This function can recieve three parameters, the first as the name of the counter, the second one you can include a string which comes after the counter and the third one can be `decimal` or `upper-roman` (`decimal` by default).