How create dotted hr with fade effect

Question

Hello how can i create in html and css dotted hr like this on image

dotted hr

Answer 1

maybe this can help

.custom-hr{
  
}

.custom-hr span{
  height:10px;
  width:10px;
  background:#000;
  display:inline-block;
  border-radius:100px;
  opacity:1;
  margin:0 2px;
}

.custom-hr span:nth-child(1){
  opacity: 10;
}

.custom-hr span:nth-child(2){
  opacity: 0.8;
  height:9px;
  width:9px;
}

.custom-hr span:nth-child(3){
  opacity:0.5;
  height:8px;
  width:8px;
}

.custom-hr span:nth-child(4){
  opacity:0.2;
  height:7px;
  width:7px;
}

<div class="custom-hr">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>