How to draw a dotted line with css?

h2 {position: relative}

h2:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 60px;
  position: absolute;
  left: 50%;
  transform:  translateX(-50%);
  bottom: -60px;
  background-image: radial-gradient( ellipse, #000 2px, #000 3px, transparent 3px) ;
    background-size: 20px 20px;
    background-position: 0px 0;
  background-repeat: repeat-x;
}

<h2>REAL CSS DOTTED LINE</h2>