Owl carousel numbered pagination - pure css metod

index.html

<div class="owl-carousel">
  <div> Slide 1 </div>
  <div> Slide 2 </div>
  <div> Slide 3 </div>
  <div> Slide 4 </div>
  <div> Slide 5 </div>
  <div> Slide 6 </div>
  <div> Slide 7 </div>
</div>

<div class="info">
    <p>You can also check Owl carousel counter <a href="https://codepen.io/jovanivezic/pen/zNKgbe" target="_blank">JS solution</a></p>
</div>

script.js

$(".owl-carousel").owlCarousel({
  margin:10,
  loop:true,
  dots: true,
  nav: true,
  items: 1
});    

style.css

.owl-item {
  background-color: #D2527F;
  color: white;
  text-align: center;
  padding: 100px 0;
}

.owl-prev {
  float: left;
  font-size: 20px;
  text-transform: uppercase;
  padding: 20px;
}

.owl-next {
  float: right;
  font-size: 20px;
  text-transform: uppercase;
  padding: 20px;
}

.owl-dots {
  counter-reset: slides-num;
  /* Initialize counter. */
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 15px;
}
.owl-dots:after {
  content: counter(slides-num);
  /* get total number of items - more info on http://www.sitepoint.com/a-little-known-way-to-replace-some-scripts-with-css-counters/ */
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  vertical-align: middle;
  padding-left: 5px;
}

.owl-dot {
  display: inline-block;
  counter-increment: slides-num;
  /* Increment counter */
  margin-right: 5px;
}
.owl-dot span {
  display: none;
}
.owl-dot.active:before {
  content: counter(slides-num) " of";
  /* Use the same counter to get current item. */
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
  position: absolute;
  left: 0;
  top: 0;
}

.info {
  text-align: center;
  margin-top: 110px;
}