Add extra spacing between dots with text-Decoration-style: dotted;

Question

Is there any way to add extra space between the dotted inserted with text-decoration-style: dotted?

I own this anchor:

.anchor {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 5px;
}

<a class="anchor" href="">
  Hi! Click me
</a>

Answer 1

There is still no such dashOffset property natively in the CSS text-Decoration style. With SVG you can control this. But in this answer I will pass a workaround with pure CSS using a radial-gradiente in the pseudo-element. The details I left commented on in CSS

Code of the image above

Edit: I made a pseudo-elemento before to be able to leave the entire area of the clickable link, even the space between the text and the dotted line. I put a BG color just to make it easier to view the link area

.anchor {
  /* text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 5px; */
  position: relative;
  text-decoration: none;
}
.anchor::after {
    content: "";
    width: 100%;
    height: 4px;
    position: absolute;
    /* altura entre a linha e o texto */
    bottom: -16px;
    left: 0;
    /* aqui vc controla o tamanho do Dot, no caso ele está com 2px */
    background-image: radial-gradient(circle, black 2px, transparent 2px);
    /* o valor de 16px é a distancia entre um ponto e outro */
    background-size: 16px 4px;
}

.anchor::before {
    content: "";
    width: 100%;
    /* o valor de 16px é pq ele deve ser igual ao valor do bottom do ::after */
    height: calc(100% + 16px);
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 0;
    top: 0;
    background-color: #dedede;
    z-index: -1;
}

.anchor:hover::after {
    /* exemplo trocando a cor e o espaçamento no hover */
    background-image: radial-gradient(circle, red 2px, transparent 2px);
    background-size: 8px 4px;
}

<a class="anchor" href="">
  Hi! Click me
</a>