<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" href="">
  <div class="cat_init ">
    <div class="dog_init block">
      <h3>Cat <i></i> wrote this code.</h3>
      <h3> Dog <span></span> can talk and Cat <i></i> can speaks French  </h3>
      <h3> Dog <span></span> is  intelligent  and Cat <i></i> is dumb</h3>
      <h3> Dog <span></span> just learned how to swim  and Cat <i></i> skips a rope</h3>
    <!-- Now to reset the dog counter but continue the cat counter -->
    <div class="dog_init block" style="margin-top:60px;">
      <h3>Dog <span></span>  is pissed with cat <i></i></h3>
body {
    font-family: Arial; /* Just because its better looking ;) */
    counter-reset: cat_number;
    counter-reset: dog_number;
  background: #eee;
  border: solid thin #ccc;
  margin-bottom: 50px;
  padding: 15px 20px;

h3 span::before {
    counter-increment: dog_number;
    content: "number " counter(dog_number); 
    color: red;

h3 i::before {
    counter-increment: cat_number;
    content: "number " counter(cat_number); 
    color: blue;